接口环境变量配置

基于cros与jsonp跨域

• main.js

import Vue from 'vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App.vue'
import env from './env'

axios.defaults.baseURL='/api';
axios.defaults.timeout=8000;
axios.defaults.baseURL=env.baseURL;
axios.interceptors.response.use(function(response){
  let res=response.data;
  if(res.status==0){
    return res.data;
  }else if(res.status==10){
    window.location.href='/#/login'
  }else{
    alert(res.msg);
  }
});

Vue.use(VueAxios,axios);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

• package.json

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

这里的--mode 为注入一个参数，把环境变量传给项目，这样项目才能知道当前位于哪个环境

• env.js（在src下新建一个env.js用于配置接口环境变量）

let baseURL;
// 根据不同的环境输出不同的URL地址
// process.env 获取当前Nodejs进程里的环境变量，这个环境变量最终会写入到Nodejs里面
// process.env.NODE_ENV 获取当前传过来的参数
switch (process.env.NODE_ENV) {
    case 'dev':
        baseURL = 'http://dev-mall-pre.springboot.cn/api'
        break;
    case 'test':
        baseURL = 'http://test-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
}

1. development 开发环境

• 启动项目

cnpm run serve

• 测试结果

2. test 测试环境

package.json：

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

• 若不生效：可新建一个.env.test 文件，从而将环境变量注入进去

.env.test：

NODE_ENV='test'

• 启动项目

cnpm run serve

• 测试结果

3. te_st 自定义环境

• package.json

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

• .env.te_st

NODE_ENV='te_st'

• env.js

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

• 启动项目

cnpm run serve

• 测试结果