vue打包之后配置統(tǒng)一請求地址步驟詳解
更新時間：2023年07月04日 11:28:14 作者：喜歡走彎路的人
這篇文章主要為大家介紹了vue打包之后配置統(tǒng)一請求地址實現(xiàn)步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
1.第一步
在public文件夾下新建一個config.js文件,并添加如下內(nèi)容
exports.PLATFROM_CONFIG = {
? ? baseURL: "服務(wù)器地址"
}2.第二步
在vue.config.js中根據(jù)路徑引入后，修改服務(wù)器代理地址target
const PLATFROM_CONFIG = require('./public/config.js')
devServer: {
? ? port: 8080,
? ? proxy: {
? ? ? '/fdapis': {
? ? ? ? target: PLATFROM_CONFIG.PLATFROM_CONFIG.baseURL,//修改服務(wù)器代理地址
? ? ? ? ws: false,
? ? ? ? changeOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? '^/fdapis': ''? //需要rewrite的,
? ? ? ? }
? ? ? }
? ? }
? },3.第三步
在封裝的網(wǎng)絡(luò)請求文件中設(shè)置默認請求地址，我的項目中請求地址在request.js文件中配置
首先，根據(jù)路徑引入public文件中的config.js文件：
import PLATFROM_CONFIG from '../../public/config'
其次，根據(jù)地址配置，修改PLATFROM_CONFIG文件中的baseURL地址：
PLATFROM_CONFIG.PLATFROM_CONFIG.baseURL=localStorage.getItem('BASE_URL') // 在request.js中修改配置地址這里之所以從localStorage.getItem('BASE_URL') 中取值，并賦值給PLATFROM_CONFIG文件中的baseURL是由于，我的地址在登錄時由用戶自己配置服務(wù)器地址以及端口號，并存儲在了session中。如下圖所示：
用戶自己配置服務(wù)器地址
4.最后統(tǒng)一配置服務(wù)器請求地址
Vue.prototype.BASE_URL = localStorage.getItem('BASE_URL') // 公共的服務(wù)器地址
以上就是vue打包之后配置統(tǒng)一請求地址的詳細內(nèi)容，更多關(guān)于vue打包請求地址配置的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue路由劃分模塊并自動引入方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
數(shù)據(jù)過多滑動表格的時候,看不到表頭不知道對應(yīng)的數(shù)據(jù)是什么,用戶體驗操作不友好,要改成表頭固定住,所以本文給大家介紹了關(guān)于element-ui表頭吸附問題的兩個解決方案,需要的朋友可以參考下2024-01-01
本文通過實例代碼給大家介紹了vue 下列表側(cè)滑操作,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了vue2.0 keep-alive的最佳實踐，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue在手機中通過本機IP地址訪問webApp的方法,需要的朋友可以參考下2018-08-08
本篇文章主要介紹了基于Vue2x的圖片預(yù)覽插件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue多級復(fù)雜列表展開/折疊及全選/分組全選實現(xiàn)
這篇文章主要介紹了vue多級復(fù)雜列表展開/折疊及全選/分組全選實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue Element UI + OSS實現(xiàn)上傳文件功能
這篇文章主要為大家詳細介紹了Vue Element UI + OSS實現(xiàn)上傳文件功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
vue3使用拖拽組件draggable.next的保姆級教程
做項目的時候遇到了一個需求,拖拽按鈕到指定位置，添加一個輸入框,這篇文章主要給大家介紹了關(guān)于vue3使用拖拽組件draggable.next的保姆級教程,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue中jsx不完全應(yīng)用指南小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-11-11