vue cli 3 配置分环境打包,配置多环境打包,cross-env没有效果,cross-env在vue-cli 3中的使用

vue 分环境打包

在开发过程中，可能会遇到这样一个问题，在开发环境，测试环境和生产环境中我们会用到不一样的接口，每次在不同环境中都要手动去切换接口地址，只会很麻烦，有时还可能出现操作失误。这时候就需要用到分环境打包了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。

模式

vue-cli项目下默认有三种模式：

• development模式：在 vue-cli-service serve 时使用。
• production模式：在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。
• test模式：在 vue-cli-service test:unit 时使用。
  每个模式都会将 NODE_ENV 设置为模式的名称，比如在development模式下，NODE_ENV为 “development”。

自定义模式

我们可以通过环境文件来指定环境变量，环境文件有一下几个类型：

• .env 文件， 在所有的环境中被载入
• .env.local 文件， 在所有的环境中被载入，但会被 git 忽略
• .env.[mode] 文件， 只在指定的模式中被载入
• .env.[mode].local， 只在指定的模式中被载入，但会被 git 忽略
  [mode] 就是我们要自定义的模式名称。例如在根目录下新建一个 .env.test 文件，文件的书写格式是 “环境变量的键=值”:

//在 .env.testing 文件中
NODE_ENV=production
VUE_APP_URLENV=testing

注意： 只有以 “VUE_APP_” 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，才能在应用中通过 process.env.VUE_APP_xxx 来访问。

执行自定义模式

通过在package.json脚本中增加 --mode [mode] 来指定模式，例如：

//package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode testing",
  }

执行 npm run build:test 时就会通过 .env.test 文件将 NODE_ENV 设置为 production，将 VUE_APP_URLENV 设置为 testing。
在应用中也可通过自定义的变量来设定接口url：

const precessEnv = process.env;
let curBaseUrl = 'http://192.168.1.1:8080';

switch( precessEnv.VUE_APP_URLENV )
{
    case 'development': 
        curBaseUrl = 'http://192.168.1.1:8080';
        break
    case 'testing': 
        curBaseUrl = 'http://192.168.2.2:8080';
        break
    default:
        curBaseUrl = 'http://192.168.3.3:8080';
}

let _req = axios.create({
    baseURL: curBaseUrl,
});

这样就可以通过增加模式文件来自定义环境变量，以达到分环境打包。