cross-env 环境配置

场景

在开发过程中，通常会遇到这样的问题：

1. 在开发环境、测试环境和生产环境中我们会用到不一样的接口
2. 在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口
3. 多端一体的项目模式

这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。这时候就需要用到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
}

作者：o秋北o
链接：https://www.jianshu.com/p/ecf1a4130add
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。