導語
本文主要描述 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
應用部署完成。
@萌貓他爸，互聯網從業者/大數據架構師/全棧開發者