项目中接口环境配置

根据前端跨域方式不同进行配置 。 使用CORS或者jsonp 跨域就需要 ， 反向代理就不用配置

• 为什么需要配置 ?

1. webpack的 --mode参数 ，注入变量参数

"scripts": {
    "serve": "vue-cli-service serve --mode=development",
    "test": "vue-cli-service serve --mode=test",
    "build": "vue-cli-service build --mode=production",
    "lint": "vue-cli-service lint"
  },

2. 自定义环境参数

• 根目录新建 .env.test 文件

NODE_ENV = 'test'

3. process.env.NODE_ENV 拿到参数进行判断

横向扩展 process.env

env.js代码如下 ：

let baseURL;
switch (process.env.NODE_ENV) {
  case 'development':
    baseURL = 'http://dev-mall-pre.springboot.cn/api';
    break;
  case 'test':
    baseURL = 'http://test-mall-pre.springboot.cn/api';
    break;
  case 'prev':
    baseURL = 'http://prev-mall-pre.springboot.cn/api';
    break;
  case 'prod':
    baseURL = 'http://mall-pre.springboot.cn/api';
    break;
  default:
    baseURL = 'http://mall-pre.springboot.cn/api';
    break;
}

export default {
  baseURL
}

4. 最后导入main.js 并修改baseURL

// 根据环境变量获取不同的请求地址
axios.defaults.baseURL = env.baseURL