zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    poj 2253
    POJ 3273
    python基本运算符
    python基本数据类型以及常量变量
    pycharm的快捷键
    计算机基础
    day100 scrapy请求传参 中间件 去重规则 分布式爬虫
    day99 爬虫 scrapy介绍 结构介绍
    day98 爬虫 selenium
    day97 爬虫bs4
  • 原文地址:https://www.cnblogs.com/qlb-7/p/13995332.html
Copyright © 2011-2022 走看看