Vue 配置多环境开发 开发环境 生产环境 测试环境

介绍

多环境开发指的是在同一个项目中，针对不同的开发环境配置不同的设置或参数。

官方文档：https://cli.vuejs.org/zh/guide/mode-and-env.html#模式

三个模式

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

对应package.json下的

"scripts": {"serve": "vue-cli-service serve","build:prod": "vue-cli-service build --mode production","build:test": "vue-cli-service build --mode test"
}

各环境文件命名

配置文件

• .env # 在所有的环境中被载入
• .env.local # 在所有的环境中被载入，但会被 git 忽略
• .env.[mode] # 只在指定的模式中被载入
• .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略

配置文件

一个环境文件只包含环境变量的“键=值”对。
只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

环境的配置文件就必须在根目录下

例如配置开发环境
.env.development

VUE_APP_BASE_URL_API="/prod-api"
VUE_APP_SERVER="http://www.xx.com"
VUE_APP_API="http://www.xx.com/xx-api"

读取配置文件

项目容易位置无需引入，通过process读取

// 创建 Axios 实例
const instance = axios.create({baseURL: process.env.VUE_APP_API
});