[TOC] #### 1. Vue CLI 模式 --- **模式和環(huán)境變量** 官方文檔：<https://cli.vuejs.org/zh/guide/mode-and-env.html> **模式** 是 Vue CLI 項目中一個重要的概念。默認情況下，Vue CLI 項目有三個模式： | 模式 | 指令 | 說明 | | ------------ | ------------ | ------------ | | development | `vue-cli-service serve` | 開發(fā)模式 | | production | `vue-cli-service build` 和 `vue-cli-service test:e2e` | 生產(chǎn)模式 | | test | `vue-cli-service test:e2e` | 單元測試 | Vue CLI 默認提供了兩個腳本命令：`serve` 是開發(fā)模式 `build` 是生產(chǎn)模式 ```json { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } ``` 可以通過 `--mode` 參數(shù)為命令行指定模式 ``` # 本地運行時使用 production 模式 vue-cli-service serve --mode production # 執(zhí)行打包時使用 development 模式 vue-cli-service build --mode development ``` #### 2. Vue CLI 環(huán)境變量 --- 環(huán)境變量配置文件只在啟動 CLI 服務(wù)的時候加載一次，如有更改，必須重啟 CLI 服務(wù)才會生效 環(huán)境變量：同一個變量名稱在不同環(huán)境下的值不同，可以在項目根目錄下創(chuàng)建下列文件來指定環(huán)境變量： ```sh .env # 在所有的模式下被載入 .env.[mode] # 只在指定的模式中被載入 .env.local # 在所有的模式下被載入，但會被 git 忽略 .env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略 ``` 后面兩個以 .local 為后綴的文件之所以會被 git 忽略，是因為使用 vue create 創(chuàng)建 CLI 項目時，自帶 git 版本庫，并且在 .gitignore 中已經(jīng)忽略掉了它們，如下所示： ```sh # local env files .env.local .env.*.local ``` 環(huán)境變量文件加載優(yōu)先級： 特定模式環(huán)境文件（例如：.env.production）優(yōu)先于一般的環(huán)境文件（例如 .env），按照優(yōu)先級排列如下所示： ``` .env.[mode].local .env.[mode] .env.local .env ``` 環(huán)境變量文件內(nèi)容：只能定義 `NODE_ENV`、`BASE_URL` 和 `VUE_APP_ 開頭的變量` ``` NODE_ENV=development BASE_URL="http://192.168.1.121:8090" VUE_APP_TITLE=這是一個標題 ``` #### 3. 添加測試環(huán)境文件 --- 生產(chǎn)模式下可能會有多個環(huán)境：測試環(huán)境、正式環(huán)境 手動添加一個測試環(huán)境的環(huán)境文件，以 staging 模式為例。 第一步：首先添加一個腳本命令：`build:staging` ```json { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:staging": "vue-cli-service build --mode staging" } } ``` 第二步：創(chuàng)建 `.env.staging` 文件，設(shè)備 NODE_ENV 為 production，然后添加其他環(huán)境變量即可，文件內(nèi)容如下所示： ``` NODE_ENV = production VUE_APP_TITLE = My App (staging) ``` #### 4. 讀取環(huán)境變量數(shù)據(jù) --- 所有環(huán)境變量數(shù)據(jù)都存放在 `process.env` 中，讀取環(huán)境變量示例： ```javascript // 所有環(huán)境變量 process.env // 獲取當前環(huán)境 process.env.NODE_ENV // 讀取環(huán)境變量中的 VUE_APP_TITLE process.env.VUE_APP_TITLE ``` #### 5. 腳本命令配置示例 --- **腳本命令：** | 環(huán)境名稱 | 運行命令 | 打包命令 | | :-----: | :-----: | :-----: | | 開發(fā)環(huán)境 | `npm run serve:dev` | `npm run build:dev` | | 測試環(huán)境 | `npm run serve:beta` | `npm run build:beta` | | 正式環(huán)境 | `npm run serve:prod` | `npm run build:prod` | ```json { "scripts": { "serve:dev": "vue-cli-service serve", "serve:beta": "vue-cli-service serve --mode beta", "serve:prod": "vue-cli-service serve --mode production", "build:prod": "vue-cli-service build", "build:beta": "vue-cli-service build --mode beta", "build:dev": "vue-cli-service build --mode development" } } ``` **環(huán)境變量文件內(nèi)容：** **.env.development 開發(fā)環(huán)境**： ``` NODE_ENV=development ``` **.env.beta 測試環(huán)境** 和 **.env.production 正式環(huán)境**： ``` NODE_ENV=production ```