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