nuxt+axios實現(xiàn)打包后動態(tài)修改請求地址的方法

更新時間：2020年04月22日 14:37:56 作者：沐夕花開

這篇文章主要介紹了nuxt+axios實現(xiàn)打包后動態(tài)修改請求地址的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

需求：把請求地址等一些配置暴露出來以便打包后動態(tài)修改，而不需要重新打包編譯。

這樣也是挺不錯的，當一個項目需要部署到幾個不同的服務器上時候，就不用說每次都要修改后再重新打包。功能不變時，單單是修改一下請求地址省了不少功夫。

1.開始

把需要動態(tài)修改的配置寫在一個配置json文件里面。該配置文件可以放在static目錄下：

靜態(tài)文件目錄：靜態(tài)文件目錄 static 用于存放應用的靜態(tài)文件，此類文件不會被 Nuxt.js 調(diào)用 Webpack 進行構建編譯處理。服務器啟動的時候，該目錄下的文件會映射至應用的根路徑 / 下。

2.實現(xiàn)

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

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

有需求的可以擴展配置文件(想怎么寫就怎么寫，開心就行~)，例如可以根據(jù)不用的環(huán)境（開發(fā)、生產(chǎn)）切換等；

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

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

const protocolTmp = window.location.protocol; // 獲取當前 URL 的協(xié)議
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屬性上，以便調(diào)用
   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. 最后

到此這篇關于nuxt+axios實現(xiàn)打包后動態(tài)修改請求地址的方法的文章就介紹到這了,更多相關nuxt+axios 打包后動態(tài)修改請求地址內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: