vue cli3 区分开发环境，测试环境，正式环境

1. 在根目录下新建 .env.xx (xx可以是自己取的用来区分这三个环境）

下面是我新建的，分别对应测试环境，开发环境，正式环境

image.png

2. 配置

• 测试环境：

1. 测试环境和正式环境一样都是需要打包所以NODE_ENV都是'production'，VUE_APP_FLAG是我们自己取的用来区分环境的变量，为了和正式环境打包完的dist区分，我们指定测试环境的输出目录outputDir

  NODE_ENV = 'production'

  VUE_APP_FLAG = 'test'

  outputDir = 'beta'

• 开发环境：

 NODE_ENV = 'development'

  VUE_APP_FLAG = 'development'

• 正式环境：

NODE_ENV = 'production'

  VUE_APP_FLAG = 'production'

  outputDir = 'dist'

3. 接下来我们就可以根据VUE_APP_FLAG来区分不同环境啦

• 比如我用来区分接口

/**
 * 接口管理
 */
let baseURL;
if (process.env.VUE_APP_FLAG == "development") {
  baseURL = "xx";
} else if (process.env.VUE_APP_FLAG == "production") {
  baseURL = "xx";
} else if (process.env.VUE_APP_FLAG == "test") {
  baseURL = "xx";
}
const base = {
  baseurl: baseURL
};
export default base;

3. 配置打包命令

• 既然我们打包完要区分测试环境和正式环境，需要配置一下命令

1. 在根目录下新建vue.config.js，用来配置outputDir

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

2. package.json配置打包命令

"build": "vue-cli-service --no-clean build --mode production && vue-cli-service build --mode beta",

现在当你执行完npm run build就会生成dist和beta文件夹啦