基本配置

命令配置

{
  "scripts": {
    "dev": "webpack server --mode=development --env environment=DEV --config ./webpack.config.js",
    "build": "webpack --mode=production --env environment=PRD --config ./webpack.config.js",
    "start": "webpack server --mode=production --env environment=PRD --config ./webpack.config.js"
  }
}

自定义环境变量

npm -D cross-env

package.json

{
  "scripts": {
    "build": "cross-env NODE_ENV=enroll vue-cli-service build"
  }
}

根目录自定义

[mode] 是自定义的模式名称，通过在package.json脚本中增加 --mode [mode]来指定模式
// package.json
{
  "scripts": {
      "build:testing": "cross-env vue-cli-service build --mode testing",
  }
}


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

.env.tesing

// .env.testing 文件
NODE_ENV = production;
VUE_APP_ENV = testing;
// 只有以 “VUE_APP_” 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，才能在应用中通过 process.env.VUE_APP_xxx 来访问。

获取环境变量

const { VUE_APP_ENV } = process.env;
let baseUrl = "http://192.168.1.1:8080";

switch (VUE_APP_ENV) {
  case "development":
    baseUrl = "http://192.168.1.1:8080";
    break;
  case "testing":
    baseUrl = "http://192.168.2.2:8080";
    break;
  default:
    baseUrl = "http://192.168.3.3:8080";
}

export default {S
  baseUrl,
};