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