這篇文章主要講解了nuxt+axios如何實現(xiàn)打包后動態(tài)修改請求地址，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
站在用戶的角度思考問題，與客戶深入溝通，找到漢川網(wǎng)站設(shè)計與漢川網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋漢川地區(qū)。
需求：把請求地址等一些配置暴露出來以便打包后動態(tài)修改，而不需要重新打包編譯。
這樣也是挺不錯的，當一個項目需要部署到幾個不同的服務(wù)器上時候，就不用說每次都要修改后再重新打包。功能不變時，單單是修改一下請求地址省了不少功夫。
1.開始
把需要動態(tài)修改的配置寫在一個配置json文件里面。該配置文件可以放在static目錄下：
靜態(tài)文件目錄：靜態(tài)文件目錄 static 用于存放應用的靜態(tài)文件，此類文件不會被 Nuxt.js 調(diào)用 Webpack 進行構(gòu)建編譯處理。 服務(wù)器啟動的時候，該目錄下的文件會映射至應用的根路徑 / 下。
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)
}
})
}看完上述內(nèi)容，是不是對nuxt+axios如何實現(xiàn)打包后動態(tài)修改請求地址有進一步的了解，如果還想學習更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
