如今的前端越来越趋近于自动化，比如：在构建项目时，我们需要对不同环境做出调用不同接口的处理。通常情况下，我们会在封装通用http请求方法的模块里面设置一个标识来表示当前处理哪种环境，
再通过判断标识来决定使用哪个接口。
例如：

1
2
3
4
5
let env = 0;
const domain = env == 0 ? 'test/api/xxx' : 'api/xxx';
axios.defaults.baseURL = domain;
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';

这种方式容易导致失误，万一哪次打包的时候忘记更改状态，更新到正式环境就导致数据流失，不可预测后果。

如果我们在执行npm run build的时候可以自动选择变更环境，能够更好的使我们减少失误，项目因此更加自动化。

查看vue-cli文档可知，通过配置.env文件实现构建环境的变更。

1.新建公共的构建环境处理文件common.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// common.js
const env = (() => {
  const ENV = {
    // 请求url
    domain: '',
  }

  switch (process.env.NODE_ENV) {
    case 'development':
      ENV.domain = `https://test/api/xxx`;
      ENV.otherApi = `https://test/otherapi/xxx`;
      break
    default:
      ENV.domain = process.env.API_ENV === 'dev' ? `https://test/api/xxx` : `https://api/xxx`;
      ENV.otherApi = process.env.API_ENV === 'dev' ? `https://test/otherapi/xxx` : `https://otherapi/xxx`;
      break
  }

  return ENV
})()

export default env

2.通用的http模块引入common.js

1
2
3
4
import common from './common'

const domain = common.domain;
const otherApi = common.otherApi;

3.新建.env.development文件

.env.development文件可在package.json的scripts启动开发环境构建命令里面配置参数供vue-cli读取。

1
2
NODE_ENV=development
API_ENV=dev

4.新建.env.product文件

.env.product文件可在package.json的scripts启动生产环境构建命令里面配置参数供vue-cli读取。

1
2
NODE_ENV=production
API_ENV=prod

5.package.json配置启动

1
2
3
4
5
6
7
8
9
{
  // ...
  "scripts": {
    "start": "vue-cli-service serve --open",
    "build": "vue-cli-service build --mode product",
    "build:dev": "vue-cli-service build --mode development",
  }
  // ...
}

通过参数--mode xxx读取对应的配置文件，变更相应的环境变量来构建整个项目。