Nuxt+Axios 实现打包后动态修改请求地址的方法

本文介绍如何在 Nuxt.js 项目中通过静态 JSON 配置文件实现打包后动态修改请求地址。无需重新编译，只需替换 static 目录下的配置文件即可适配不同服务器环境，提升部署效率。

动态配置需求与优势

需求：将请求地址等配置项暴露出来，以便在打包后能够动态修改，而无需重新进行打包编译。

这种做法非常实用。当项目需要部署到多台不同的服务器时，无需每次修改代码后重新打包。在功能不变的情况下，仅修改请求地址就能节省大量工作量。

1. 准备工作

配置文件放置位置

首先，将需要动态修改的配置信息写入一个 JSON 配置文件中。该配置文件可以放置在 static 目录下：

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

2. 具体实现

JSON 配置文件示例

在 static 目录下新建 baseConfig.json 文件，将需要暴露的配置项写入其中。代码如下：


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

如有需要，可以扩展配置文件的内容（格式自由，按需定义）。例如，可以根据不同环境（开发、生产）进行切换。

插件加载逻辑

在 plugins 文件夹下新建 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 配置引入

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


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

Axios 使用配置

最后在 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. 总结

至此，关于 Nuxt.js 结合 Axios 实现打包后动态修改请求地址的方法介绍完毕。如需了解更多相关内容，请搜索本站往期文章或继续浏览相关文章，感谢支持！

Nuxt.js 打包后动态修改请求地址的配置方案