场景
在开发过程中，通常会遇到这样的问题：
- 在开发环境、测试环境和生产环境中我们会用到不一样的接口
- 在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口
- 多端一体的项目模式
这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。这时候就需要用到cross-env进行分环境配置了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。
如何配置？
通常情况下，我们可以在package.json文件中直接修改：例
{
"scripts": {
"build": "cross-env NODE_ENV=enroll vue-cli-service build"
}
}
当我们需要配置多个环境变量时，未避免package.json命令过长，这时候就可以选择模式配置
默认模式
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文件分为以下类型：
-
.env， 在所有的环境中被载入 -
.env.local， 在所有的环境中被载入，但会被 git 忽略 -
.env.[mode]， 只在指定的模式中被载入 -
.env.[mode].local， 只在指定的模式中被载入，但会被 git 忽略
[mode] 是自定义的模式名称
例：通过在package.json脚本中增加 --mode [mode]来指定模式
// package.json
{
"scripts": {
"build:testing": "cross-env vue-cli-service build --mode testing",
}
}
在项目根目录新建.env.tesing文件：
// .env.testing 文件
NODE_ENV=production
VUE_APP_ENV=testing
// 只有以 “VUE_APP_” 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，才能在应用中通过 process.env.VUE_APP_xxx 来访问。
执行自定义模式
执行 npm run build:testing 时就会通过 .env.test文件将 NODE_ENV 设置为 production，将 VUE_APP_ENV 设置为 testing。
在应用中也可通过自定义的环境变量来设置接口url：
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 {
baseUrl
}
