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

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中的地址后，刷新页面就可以使用新的接口地址了。