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

vue 实现热加载（根据访问域名动态修改API）

推荐阅读