vue实践---根据不同环境，自动转换请求的url地址

一般的项目环境分为：本地环境，测试环境，预发环境，正式环境。 这些环境的域名一般是一样的， 前端请求接口的url也会随着这些环境的变化而改变，手动修改有点麻烦，所以想个办法，让请求的地址根据域名改变而改变。

第一步：

建立一个RequestConfig.js 作为配置文件，内容如下：

const APIMapping = {
    project1: {
      test: 'http://123.com',
      local: 'http://abc.com'
    },
    project2: {
      test: 'http://123.com',
      local: 'http://abc.com'
    }
  }
const currentEnvMapping = {
    '127.0.0.1': 'test',
    'localhost': 'local',
}
export { currentEnvMapping, APIMapping }

这里只列举了测试环境，和本地环境，其他环境使用方法一样。

APIMapping是所有的项目，这里有 project1，project2 ；每个项目分为本地环境（test），测试环境（local）;

currentEnvMapping 指明什么域名下使用本地环境的域名，还是测试环境的域名。

第二步

使用vuex, 建立一个store文件存放vuex, 然后再建立index.js存放数据：

import Vue from 'vue'
import Vuex from 'vuex'
import { APIMapping, currentEnvMapping } from './../common/RequestConfig.js'

Vue.use(Vuex)
const state = {
　　// 这里currentEnvMapping[location.hostname]确定是test， 还是local环境
　　// APIMapping['project1']确定了是哪个项目
　　// APIMapping['project1'][currentEnvMapping][location.hostname]最终确定了url　　

    RequestHost: APIMapping['project1'][currentEnvMapping[location.hostname]]
}

const getters = {
  get_RequestHost: state => {
    return state.RequestHost
  }
}

export default new Vuex.Store({
  state,
  getters
})

第三步

就可以使用了，跟正常的vue一样，代码如下：

 mounted(){
    console.log(this.$store.getters.get_RequestHost)
  }

 

具体的代码看这里: https://github.com/YalongYan/vue-practice/tree/master/dynamic-request

vue实践系列请看这里： https://github.com/YalongYan/vue-practice