vue cli3 配置多个环境

在项目开发的各个阶段，比如：开发环境、测试环境、生产环境，我们需要为项目指定不同的一些配置信息。比如接口api的域名，在开发环境中是开发服务器，在上线之后需要切换到正式服务器。这个时候我们就需要管理环境下的配置文件信息。

env文件说明

• .env：默认全局配置文件
• .env.local：本地覆盖。除 test 之外的所有环境都加载此文件
• .env.development, .env.test, .env.production：特定环境配置文件
• .env.development.local, .env.test.local, .env.production.local：特定环境配置本地文件，但会被 git 忽略

.env                # 默认全局配置文件，在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入

1、创建三个 .env 文件

2、配置 env 文件

配置环境变量格式

VUE_APP_{自定义环境变量名} = {值}

需要注意在vue脚手架创建的项目中需要设置环境变量配置以VUE_APP_*开头

 .env.development

NODE_ENV = 'development'
VUE_APP_ENV = 'development'

.env.production

NODE_ENV = 'production'
VUE_APP_ENV = 'production'
outputDir = 'dist'

.env.test 

NODE_ENV = 'production'
VUE_APP_ENV = 'test'
outputDir = 'dist'

3、 根据VUE_APP_ENV来区分不同环境

创建 config.js 文件

// 区分不同的配置环境
let serverUrl;
if (process.env.VUE_APP_ENV === 'development') {
    serverUrl = "http://localhost:10001/";
}
else if (process.env.VUE_APP_ENV === 'test') {
    serverUrl = "http://test.abc.com/";
}
else if (process.env.VUE_APP_ENV === 'production') {
    serverUrl = "http://prod.abc.com/";
}

4、配置打包命令

在根目录下的 vue.config.js 里配置outputDir

module.exports = {
  // 基本路径
  publicPath: "./",
  // 输出文件目录
  outputDir: process.env.outputDir,
};

package.json 配置打包命令

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

执行 npm run serve 输出的是 .env.development 中的内容

执行 npm run build 输出的是 .env.production 中的内容