vue cli3 配置多个环境

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 文件

image.png

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 中的内容
原文链接：https://blog.csdn.net/wangooo/article/details/120006881