需求：把请求地址等一些配置暴露出来以便打包后动态修改，而不需要重新打包编译。

这样也是挺不错的，当一个项目需要部署到几个不同的服务器上时候，就不用说每次都要修改后再重新打包。功能不变时，单单是修改一下请求地址省了不少功夫。

1.开始

把需要动态修改的配置写在一个配置json文件里面。该配置文件可以放在static目录下：

静态文件目录：静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

2.实现

在static下新建baseConfig.json文件,把需要暴露出来的配置写上，先上代码：

{
  "video_dir": "video/",
  "base_host": "http://xxxxx"
  "request_prefix":'/api/'
}

有需求的可以扩展配置文件(想怎么写就怎么写，开心就行~)，例如可以根据不用的环境（开发、生产）切换等；

在plugis文件夹下新建baseConfig.js文件：

import Vue from 'vue';
import axios from 'axios';

const protocolTmp = window.location.protocol; // 获取当前 URL 的协议
const { host } = window.location; // 获取当前host

<!--请求配置信息-->
async function getServerConfig() {
  return new Promise(async (resolve, reject) => {
    await axios.get(`${protocolTmp}//${host}/baseConfig.json`).then((result) => {
      const { base_host,video_dir ,request_prefix} = result.data;
      //把配置挂载在Vue属性上，以便调用
      Vue.prototype.$base_host = base_host;
      Vue.prototype.$request_prefix = request_prefix;
      Vue.prototype.$video_dir = video_dir;
      resolve();
    }).catch((error) => {
      console.log('error', error);
      reject();
    });
  });
}
getServerConfig();

在项目配置文件nuxt.config.js中引入：

plugins: [
    ...
    '~/plugins/pathConfig'
  ],

最后在axios里面配置使用，完事。axios.js :

import Qs from "qs"
import Vue from 'vue';

export default function (e) {
  // e.$axios.defaults.baseURL = 'http://xxxxxxx/api/'
  // e.$axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
     e.$axios.defaults.baseURL = Vue.prototype.$base_host + Vue.prototype.$request_prefix
  
  // request interceptor
  e.$axios.interceptors.request.use(
    config => {
      // do something before request is sent
      if (config.method == 'post') {
        config.data = Qs.stringify(config.data)
      }
      return config
    },
    error => {
      // do something with request error
      return Promise.reject(error)
    }
  )
  // response interceptor
  e.$axios.interceptors.response.use(
    /**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */
    response => {
      const res = response.data
      if (response.status === 200 && res.code == 1000) {
        return res
      } else {
        // redirect('/404')
        // if the custom code is not 200, it is judged as an error.
      }
      return Promise.reject({ code: res.code, msg: res.msg || 'Error' })
    },
    error => {
      console.log('err' + error) // for debug

      return Promise.reject(error)
    }
  )

  e.$axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      // redirect('/400')
      console.log('$axios.onError :', error)
    }
  })
}

3. 最后

学无止境。