Introduction
This paper mainly describes four important parts of Vue3 project life cycle:
- Vue3 project creation
- Development and commissioning of Vue3 project
- How do Vue3 projects differentiate between development / test / production environments
- How do Vue3 projects build deployments
These four parts are passed Vue Cli Implementation of.
Vue3 project creation
Using Vue CLI, you can easily generate the project template of Vue3, commonly known as "scaffold":
vue create hello-world
Execute the command, and the option prompt appears:
Vue CLI v5.0.1 ? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features
You can use the keyboard direction keys to select the Vue version. Here, use the default Vue3 and press enter to start creating the project.
🎉 Successfully created project hello-world. 👉 Get started with the following commands: $ cd hello-world $ npm run serve
The above information indicates that the project is created successfully.
Hello world is the project name, which will be used to generate the corresponding project folder, which contains multiple project files:
hello-world/
README.md
babel.config.js
jsconfig.json
node_modules
package-lock.json
package.json
public
src
vue.config.js
Vue Cl
For the description of project document structure, please refer to: VueJS 3 – Project Structure.
Development and commissioning of Vue3 project
A simple example of a project created using Vue CLI will be included in the project folder:
cd hello-world
Execute command:
npm run serve
A development server running project will be started:
DONE Compiled successfully in 4049ms 12 pm:51:35 App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.110:8080/ Note that the development build is not optimized. To create a production build, run npm run build.
Access with browser http://localhost:8080/ , you can see the sample page.
Sometimes we may see different running commands, such as npm run dev. why?
In fact, the composition format of the command npm run should be:
npm run [script]
Script can be understood as the script name. serve or dev is just the script name. npm run essentially executes the script corresponding to the script name.
The script name and the corresponding script are defined in the project package JSON file:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
It can be seen that the vnpserve script actually executes:
vue-cli-service serve The command starts a development server (be based on webpack-dev-server) It also comes with module thermal overload out of the box (Hot-Module-Replacement).
- Development server
Run project during project development - Module thermal overload
In the process of project development, it is not necessary to restart the development server manually most of the time; When the project changes, the development server will automatically reload and the page will refresh automatically.
Vue Cli service is the command of Vue Cli. You can refer to: vue-cli-service serve.
How do Vue3 projects differentiate between development / test / production environments
Vue Cli support Mode and environment variables , different patterns correspond to different environment variables. By default, the following three modes are built in:
- development
Development mode: the development mode is used by default when using the command Vue cli service serve; - test
Test mode: when using the command Vue cli service test: unit, the test mode is used by default; - production
Production mode: the production mode is used by default when using the command Vue cli service build or Vue cli service test: E2E;
When using the above command, if you need to use other modes, you can specify them through the parameter -- mode.
Each mode corresponds to a set of environment variables, which will be automatically loaded from the environment file of the corresponding mode when running the command. The format of the environment file name is required:
.env.[mode]
Where mode is the name of the mode. The environment file needs to be placed in the project root directory.
. env is used to configure common environment variables.
The mode name supports customization.
Environment variables support the following three types:
- NODE_ENV
- BASE_URL
- VUE_APP_ Variable at the beginning
NODE_ENV has a great impact on the construction and operation of applications (refer to the official website). Its value depends on the mode. For the three built-in modes:
- Mode: development, NODE_ENV: development
- Mode: test, NODE_ENV: test
- Mode: production, NODE_ENV: production
Other modes, node_ The value of Env comes from the environment file of the mode; If node is not configured in the environment file_ Env, then NODE_ENV is development.
Use environment variables in your code:
process.env.NODE_ENV process.env.BASE_URL process.env.VUE_APP_SECRET
How do Vue3 projects build deployments
Project construction
Before deploying a Vue3 project, you need to build the project into a deployable application and execute the command in the root directory of the project:
npm run build
The following prompt message appears:
DONE Compiled successfully in 7008ms 5 pm:08:48 File Size Gzipped dist/js/chunk-vendors.07827a19.js 72.69 KiB 27.19 KiB dist/js/app.eae9c148.js 13.10 KiB 8.44 KiB dist/css/app.2cf79ad6.css 0.33 KiB 0.23 KiB Images and other types of assets omitted. Build at: 2022-03-07T09:08:48.312Z - Hash: ce50ca3dd72b5756 - Time: 7008ms DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
Indicates that the project construction is complete. The built application is located in the dist folder of the project root directory:
dist/
css
favicon.ico
index.html
js
Project deployment
The built application can be deployed to the Web server. Take Nginx as an example.
Create a deployment directory (/ TMP / Hello World) and copy all files in dist folder to the deployment Directory:
mkdir -p /tmp/hello-world cp -R ./dist /tmp/hello-world
Configure Nginx:
location / {
root /Users/yurun/workspace/meetu/website/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
root
The deployment directory of the application.
index
The default request page for the application. For a single page application that has been built, there is only one index HTML page file.
Vue3 officially recommends the use of the routing library Vue Router, which supports a variety of routes Routing mode , recommended HTML5 mode . There is a problem to pay attention to when using this mode:
Suppose there is a route in the application:/activity: As mentioned earlier, the application deployment directory contains only one index.html Documents; If you use a browser to access directly http://localhost/activity. Because there is no page file named activity in the application deployment directory, 404 will be prompted.
In this case, we need to have Nginx redirect the request to / index HTML, whose internal routing policy knows how to handle / activity requests.
Restart Nginx:
nginx -s reload
Application deployment completed.
@Cute cat's father, Internet practitioner / Big Data Architect / full stack developer
- Blog
- Github @leaderman
- micro-blog @Cute cat his father (Zhihu / xiaohongshu /...)
- Official account @ deep sea
- Micro signal @ meetuagent