The Vue CLI documentation, now reads:
“For new projects, it is now recommended to use create-vue to scaffold Vite-based projects.”
Well, I guess we better learn how to use create-vue. You can (or not) read why Evan You (the creator of Vue.js) and a team of developers started the Vite project. Vite’s dev server is reportedly much faster than Live Server on large projects.
In this tutorial, we’ll walk through how to create a new project using Vite.
Create a New Project Using Vite
First, open the VSC terminal and change your working directory to your projects directory. Next, issue the following command in the terminal:
npm init vue@latest
This will display the following:
Need to install the following packages: create-vue@3.5.0 Ok to proceed? (y)
Enter y and press enter.
The setup tool will ask you to choose various configuration settings. Aside from the project name which we’ll change to app2, we can choose the default (No) for all of the other settings. Below are the prompts that you will see.
Project name:app2 Add Typescript? No Add JSX Support? No Add Vue Router for Single Page Application development? No Add Pinia for state management? No Add Vitest for Unit Testing? No Add an End-to-End Testing Solution? No Add ESLint for code quality? No
When done, the tool displays the following:
Done. Now run:
cd app2
npm install
npm run dev
Do as the tool instructs and run the three above commands.
When you run npm run dev, the tool will display a localhost URL in the terminal. If you hover over the URL in the terminal, a link will be displayed which when clicked loads the app in your browser.
Like Live Server, the Vite dev server automatically loads changes that we make to the source code to the server. Try it out. Add an exclamation point (!) after You did it in projects/app2/src/Vue.app and view the change in your browser.
Update the Production Build Command
In package.json is a property named “scripts”.
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
The scripts object contains 3 properties which are mapped to the commands that are run when the npm scripts are executed. For example when you run ‘npm run build‘ on the command line, what is actually run is ‘vite build‘.
The vite build command has many options. One of the options is –minify. By default, Vite minifies the final distribution code to reduce file space. It also makes the files running in the browser unreadable. Let’s turn off minification by adding --minify false to the vite build command.
Since Vite expects our app to be hosted in the root directory on our server and we’re planning on hosting the app in public_html/app2, we need to inform Vite where the app’s base directory is located. We can specify the base directory in the build script by adding --base /app2/ to the vite build command.
To turn minification off and change the base directory, the line for the build script should be written as follows:
"build": "vite build --minify false --base /app2/",
Build a Production Version of the App
Press ctrl + c in the terminal to stop the Vite server. Then enter the following command to build a production version of the app:
npm run build
Deploy the App to Azure
Add a new directory named app2 in your public_html directory.
Next, copy all of the files in projects/app2/dist into public_html/app2.
Add a link to app2 in public_html/index.html.
Now change the terminal’s working directory to your public_html directory, add index.html and the app2 directory to your git change set, commit the changes, and push your changes to GitHub.
cd ../../public_html git add index.html app2 git commit -m 'uploading app2' git push origin main
Give GitHub a few minutes to run the workflow, then inspect your Azure site to see if your app works properly on Azure.
© 2023, Eric.