美文网首页
2020-01-13 nuxt实现打包后可动态修改接口地址

2020-01-13 nuxt实现打包后可动态修改接口地址

作者: 坨坨_ea46 | 来源:发表于2020-01-13 11:51 被阅读0次

    1. 此功能的原因:

      1.  当接口地址需要改动时,需要修改代码重新提交、重新打包;
      2.  当项目不需要修改功能;只需要改变一下接口地址,其它项目可以直接部署使用时;
    

    2. 思路:

    配置一个json文件,可以通过修改此文件达到改变接口地址的目的;
    此时便需要在页面入口处可以读到此文件;

    3: 实施

    3-1: 新建pathConfig.json文件

    此文件由于是对外可以进行修改的,因此不能进行编译,可放在static文件夹下;

    {
      "currEnv": "", // 如果为空,则默认使用内部自定义的环境地址
      "dev": {
        "protocal": "https://", // 如果为空,则默认使用浏览器地址的协议
        "baseUrl": "192.168.xx.xx:8080/test",
      },
      "test": {
        "protocal": "",
        "baseUrl": "192.168.xx.xx:8080/test",
      },
      "product": {
        "protocal": "http://",
        "baseUrl": "192.168.xx.xx:8080/test",
      }
    }
    
    

    3-2: 在plugins文件夹下配置pathConfig.js获取pathConfig.json中的配置挂在到全局Vue.prototype上;

    import Vue from 'vue';
    import axios from 'axios';
    
    const protocolTmp = window.location.protocol;
    const { host } = window.location;
    
    async function getServerConfig() {
      return new Promise(async (resolve, reject) => {
        await axios.get(`${protocolTmp}//${host}/上下文/pathConfig.json`).then((result) => {
          const { currEnv } = result.data;
          let config = {};
          if (currEnv) {
            Vue.prototype.currEnv = currEnv;
            config = result.data[currEnv];
            Object.keys(config).forEach((key) => {
              Vue.prototype[key] = config[key];
            });
          }
          resolve();
        }).catch((error) => {
          console.log(error);
          reject();
        });
      });
    }
    getServerConfig();
    
    

    3-3: 在nuxt.config.js中配置pathConfig.js

    plugins: [
        '@/plugins/pathConfig'
      ],
    

    3-4: 在plugins/axios.js中使用

    import Vue from 'vue';
    import axios from 'axios';
    import path from '~/config';
    
    const timeout = 200000;
    const protocal = Vue.prototype.protocal ? Vue.prototype.protocal : `${window.location.protocol}//`;
    
    const baseUrl = Vue.prototype.currEnv ? `${protocal}${Vue.prototype.baseUrl}` : path.baseUrl;
    
    export const indexAxios = axios.create({
      baseURL: baseUrl,
      timeout
    });
    

    至此,打包后,修改pathConfig.json中的地址后,刷新页面就可以使用新的接口地址了。

    相关文章

      网友评论

          本文标题:2020-01-13 nuxt实现打包后可动态修改接口地址

          本文链接:https://www.haomeiwen.com/subject/gwpgactx.html