您好,登錄后才能下訂單哦!
這篇文章主要講解了nuxt+axios如何實現打包后動態修改請求地址,內容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。
需求:把請求地址等一些配置暴露出來以便打包后動態修改,而不需要重新打包編譯。
這樣也是挺不錯的,當一個項目需要部署到幾個不同的服務器上時候,就不用說每次都要修改后再重新打包。功能不變時,單單是修改一下請求地址省了不少功夫。
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) } }) }
看完上述內容,是不是對nuxt+axios如何實現打包后動態修改請求地址有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。