导语
本文主要描述 Vue3 项目生命周期中比较重要的四部分内容：
- Vue3 项目的创建
- Vue3 项目的开发调试
- Vue3 项目如何区分开发/测试/生产环境
- Vue3 项目如何构建部署
这四部分内容都是通过 Vue Cli 实现的。
Vue3 项目的创建
使用 Vue CLI 可以很方便的生成 Vue3 的项目模板，俗称“脚手架”：
vue create hello-world
执行命令，出现选项提示：
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
可以使用键盘方向键选择 Vue 版本，这里使用默认 Vue3，回车开始创建项目。
Successfully created project hello-world.
Get started with the following commands:
$ cd hello-world
$ npm run serve
出现如上信息，表示项目创建成功。
hello-world 是项目名称，会使用该名称生成相应的项目文件夹，内部包含多个项目文件：
hello-world/
README.md
babel.config.js
jsconfig.json
node_modules
package-lock.json
package.json
public
src
vue.config.js
Vue Cl
项目文件结构说明可以参考：VueJS 3 – Project Structure。
Vue3 项目的开发调试
使用 Vue CLI 创建的项目会自带有一个简单示例，进入项目文件夹：
cd hello-world
执行命令：
npm run serve
会启动一个开发服务器运行项目：
DONE Compiled successfully in 4049ms 下午12: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.
使用浏览器访问 http://localhost:8080/，就可以看到示例页面。
有时候我们可能会看到不一样的运行命令，比如：npm run dev，这是为什么？
实际上，命令 npm run 的组成格式应为：
npm run [script]
script 可以理解为脚本名称，serve 或者 dev 只是脚本名称，npm run 本质是执行脚本名称对应的脚本。
脚本名称和对应的脚本被定义在项目的 package.json 文件中：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
可以看出，npm run serve 实际执行的脚本命令是 vue-cli-service serve：
vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
- 开发服务器
项目开发时运行项目 - 模块热重载
项目开发过程中，大部分时候不需要手动重启开发服务器；项目变动时，开发服务器会自动完成重新加载，页面也会自动刷新。
vue-cli-service 是 Vue Cli 的命令，可以参考：vue-cli-service serve。
Vue3 项目如何区分开发/测试/生产环境
Vue Cli 支持 模式和环境变量，不同的模式对应着不同的环境变量。默认情况下，内置以下三种模式：
- development
开发模式，使用命令 vue-cli-service serve 时默认使用开发模式； - test
测试模式，使用命令 vue-cli-service test:unit 时默认使用测试模式； - production
生产模式，使用命令 vue-cli-service build 或 vue-cli-service test:e2e 时默认使用生产模式；
使用上述命令时，如果需要使用其它的模式，可以通过参数 --mode 指定。
每一种模式都对应着一组环境变量，运行命令时会自动从相应模式的 环境文件 中加载，环境文件名称格式要求：
.env.[mode]
其中，mode 为模式名称。环境文件需要放置在项目根目录中。
.env 用于配置通用的环境变量。
模式名称支持自定义。
环境变量支持以下三种：
- NODE_ENV
- BASE_URL
- 以 VUE_APP_ 开头的变量
NODE_ENV 对应用的构建运行有较大影响（参考官网），它的值取决于模式，对于内置的三种模式：
- 模式：development，NODE_ENV：development
- 模式：test，NODE_ENV：test
- 模式：production，NODE_ENV：production
其它模式，NODE_ENV 的值来源于模式的环境文件；如果环境文件中没有配置 NODE_ENV 的值，则 NODE_ENV 为 development。
在代码中使用环境变量：
process.env.NODE_ENV
process.env.BASE_URL
process.env.VUE_APP_SECRET
Vue3 项目如何构建部署
项目构建
Vue3 项目部署之前，需要先将项目构建成可以部署的应用程序，在项目根目录内执行命令：
npm run build
出现以下提示信息：
DONE Compiled successfully in 7008ms 下午5: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
表示项目构建完成。构建完成的应用程序位于项目根目录的 dist 文件夹内：
dist/
css
favicon.ico
index.html
js
项目部署
构建完成的应用程序可以部署至 Web 服务器中，这里以 Nginx 为例。
创建部署目录（/tmp/hello-world），将 dist 文件夹内的所有文件全部拷贝至部署目录：
mkdir -p /tmp/hello-world
cp -R ./dist /tmp/hello-world
配置 Nginx：
location / {
root /Users/yurun/workspace/meetu/website/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
root
应用程序的部署目录。
index
应用程序的默认请求页。对于构建完成单页面应用程序而言，仅有一个 index.html 页面文件。
Vue3 官方推荐使用路由库 Vue Router，它支持多种路由模式，推荐使用 HTML5 模式。使用这种模式需要注意一个问题：
假设应用内存在一个路由：/activity：如前文所述，应用部署目录内仅包含一个 index.html 文件；如果使用浏览器直接访问 http://localhost/activity，因为应用部署目录内并不存在名称为 activity 的页面文件，因此会提示 404。
类似这种情况，我们需要让 Nginx 内部将请求重定向至 /index.html，它内部的路由策略知道如何处理 /activity 请求。
重启 Nginx：
nginx -s reload
应用部署完成。
@萌猫他爸，互联网从业者/大数据架构师/全栈开发者