Vue CLI 脚手架的模式和环境变量

作者：辰风沐阳阅读：617 发布时间：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 脚手架的模式和环境变量

最新发布

友情链接