Vue CLI 腳手架的模式和環境變量

作者：辰風沐陽閱讀：1605 發布時間：2023-03-15 上次更新：2023-03-15

[TOC]

#### 1. Vue CLI 模式
---

**模式和環境變量** 官方文檔：<https://cli.vuejs.org/zh/guide/mode-and-env.html>

**模式** 是 Vue CLI 項目中一個重要的概念。默認情況下，Vue CLI 項目有三個模式：

| 模式  | 指令  | 說明  |
| ------------ | ------------ | ------------ |
| development  | `vue-cli-service serve`  | 開發模式  |
| production  | `vue-cli-service build` 和 `vue-cli-service test:e2e`  | 生產模式  |
| test  | `vue-cli-service test:e2e`  | 單元測試  |

Vue CLI 默認提供了兩個腳本命令：`serve` 是開發模式 `build` 是生產模式

```json
{
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    }
}
```

可以通過 `--mode` 參數為命令行指定模式

```
# 本地運行時使用 production 模式
vue-cli-service serve --mode production
# 執行打包時使用 development 模式
vue-cli-service build --mode development
```

#### 2. Vue CLI 環境變量
---

環境變量配置文件只在啟動 CLI 服務的時候加載一次，如有更改，必須重啟 CLI 服務才會生效

環境變量：同一個變量名稱在不同環境下的值不同，可以在項目根目錄下創建下列文件來指定環境變量：

```sh
.env              # 在所有的模式下被載入
.env.[mode]       # 只在指定的模式中被載入
.env.local        # 在所有的模式下被載入，但會被 git 忽略
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
```

后面兩個以 .local 為后綴的文件之所以會被 git 忽略，是因為使用 vue create 創建 CLI 項目時，自帶 git 版本庫，并且在 .gitignore 中已經忽略掉了它們，如下所示：

```sh
# local env files
.env.local
.env.*.local
```

環境變量文件加載優先級：

特定模式環境文件（例如：.env.production）優先于一般的環境文件（例如 .env），按照優先級排列如下所示：

```
.env.[mode].local
.env.[mode]
.env.local
.env
```

環境變量文件內容：只能定義 `NODE_ENV`、`BASE_URL` 和 `VUE_APP_ 開頭的變量`

```
NODE_ENV=development
BASE_URL="http://192.168.1.121:8090"
VUE_APP_TITLE=這是一個標題
```

#### 3. 添加測試環境文件
---

生產模式下可能會有多個環境：測試環境、正式環境

手動添加一個測試環境的環境文件，以 staging 模式為例。

第一步：首先添加一個腳本命令：`build:staging`

```json
{
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build:staging": "vue-cli-service build --mode staging"
    }
}
```

第二步：創建 `.env.staging` 文件，設備 NODE_ENV 為 production，然后添加其他環境變量即可，文件內容如下所示：

```
NODE_ENV = production
VUE_APP_TITLE = My App (staging)
```

#### 4. 讀取環境變量數據
---

所有環境變量數據都存放在 `process.env` 中，讀取環境變量示例：

```javascript
// 所有環境變量
process.env

// 獲取當前環境
process.env.NODE_ENV

// 讀取環境變量中的 VUE_APP_TITLE
process.env.VUE_APP_TITLE
```

#### 5. 腳本命令配置示例
---

**腳本命令：**

```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"
    }
}
```

**環境變量文件內容：**

**.env.development 開發環境**：

```
NODE_ENV=development
```

**.env.beta 測試環境** 和 **.env.production 正式環境**：

```
NODE_ENV=production
```

Vue CLI 腳手架的模式和環境變量

最新發布

友情鏈接