vue 實現熱加載（根據訪問域名動態修改API）

一、前景：

　　最近接到一個需求需要根據訪問域名來動態修改axios 請求 api 剛剛跟我說的時候真的是一頭霧水 webpack 真的支持這樣嗎

　　但是在敵不過各方的壓力 再高人的指點下終於給他整出來了

二、實現：

　　實現域名熱加載 是結合 vuex 一起來完成的 其實就是動態監聽 window.location.host 然后根據不同的 域名來修改 axios 的 BASEURL

　　首先在封裝一下我們要處理的域名

　　request.js

const APIMapping = {
  project: {
    local: {api: '"https://xxx1.net"'},
    test: {api: '"https://xxx2.com"'},
    pre: {api: '"https://xxx3.com"'},
    prod: {api: '"https://xxx4"'}
  }
}
const currentEnvMapping = {
  '127.0.0.1': 'local',
  'xxx2': 'test',
  'xxx3': 'pre',
  'xxx3': 'prod'
}
export { currentEnvMapping, APIMapping }

　　然后在 vuex state.js 中引入並定義

import { APIMapping, currentEnvMapping } from './request'
export default{
RequestHost: APIMapping['project'][currentEnvMapping[location.hostname]],    
}

　　然后在 vuex getters.js 中引用

export const getRequest = state => state.RequestHost

　　最后驗證一下即可

　　

mounted() {
    console.log(this.$store.getters.getRequest.api)
    console.log(this.$store.getters.getRequest.imApi)
  },

三、總結：

　　希望你們也可以完美解決所有的bug

　　願以后都不會有bug