1. 在根目錄下新建 .env.xx (xx可以是自己取的用來區(qū)分這三個環(huán)境）

下面是我新建的，分別對應(yīng)測試環(huán)境，開發(fā)環(huán)境，正式環(huán)境

image.png

2. 配置

• 測試環(huán)境：

1. 測試環(huán)境和正式環(huán)境一樣都是需要打包所以NODE_ENV都是'production'，VUE_APP_FLAG是我們自己取的用來區(qū)分環(huán)境的變量，為了和正式環(huán)境打包完的dist區(qū)分，我們指定測試環(huán)境的輸出目錄outputDir

  NODE_ENV = 'production'

  VUE_APP_FLAG = 'test'

  outputDir = 'beta'

• 開發(fā)環(huán)境：

 NODE_ENV = 'development'

  VUE_APP_FLAG = 'development'

• 正式環(huán)境：

NODE_ENV = 'production'

  VUE_APP_FLAG = 'production'

  outputDir = 'dist'

3. 接下來我們就可以根據(jù)VUE_APP_FLAG來區(qū)分不同環(huán)境啦

• 比如我用來區(qū)分接口

/**
 * 接口管理
 */
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. 配置打包命令

• 既然我們打包完要區(qū)分測試環(huán)境和正式環(huán)境，需要配置一下命令

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",

現(xiàn)在當(dāng)你執(zhí)行完npm run build就會生成dist和beta文件夾啦