二、撸vue/cli 3.+ 的正确姿势（自定义运行命令）

1、vue/cli 3.+ 默认命令

在根目录下package.json 文件里有一个scripts属性

  "scripts": {
    "serve": "vue-cli-service serve",   // 对应npm run serve命令，运行在本地开发环境
    "build": "vue-cli-service build", // 对应npm run build命令，打包发布，对应的是线上环境
    "lint": "vue-cli-service lint" // 对应npm run lint 命令，修复eslint插件报错
  },

2、根据不同环境打包

1、默认的命令是不包含测试环境打包地址的，这样我们需要拓展一个test站点的打包命令。

  "scripts": {
    ...
   "test": "vue-cli-service build --mode test" // 拓展一个测试站打包命令（npm run test ）
  },

2、在项目根目录增加文件

.env.test 文件内容如下：

 // 设置环境名称为test， 可以根据  process.env.NODE_ENV === 'test' 来判断当前环境是不是我们自定义的环境
  NODE_ENV = 'test'
 // 设置该环境的APIHOST环境变量,当然我们也可以只配置环境变量名称，APIHOST可以在config里，或者baseUrl.js 文件里配置。
  VUE_APP_APIHOST   = ' http://www.baidu.com/api '
 // 当然我们可以根据这种规则拓展更多的变量满足开发需求
 // VUE_APP_XXX   = XXX

官网环境变量配置参考

"scripts": {
  ...
  // .env.A  对应命令 
  // A参数: .env文件的后缀名
  // B参数: B对应的是运行时使用的命令名称，例如：npm run B 
  // 建议A 和 B 以及 环境变量中的 NODE_ENV = '' 统一设置为一个字符串，不容易弄错，容易理解
  // --mode A   指定该运行环境为A环境，运行命令时会把环境设置为A环境，并在工程里使用.env.A文件里的变量
  "B": "vue-cli-service build --mode A" 
 },

3、使用我们拓展的变量，例如我们在设置baseURL.js 文件的时候

let baseUrl = "";
// 判断环境
switch (process.env.NODE_ENV) {
    case "development":
        baseUrl = "https://XXX.baidu.com"; // 开发时候使用的api地址
        break;
    case "test":
        baseUrl = "https://test.baidu.com"; // 测试站使用的api地址
        break;
    case "production":
        baseUrl = "https://www.baidu.com"; // 正是站点地址
        break;
}
export default baseUrl;

如果你在环境变量里直接设置了APIHOST，那你也可以直接使用

let baseUrl = process.env.VUE_APP_APIHOST