vue打包之后配置統(tǒng)一請(qǐng)求地址步驟詳解
1.第一步
在public文件夾下新建一個(gè)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ò)請(qǐng)求文件中設(shè)置默認(rèn)請(qǐng)求地址，我的項(xiàng)目中請(qǐng)求地址在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是由于，我的地址在登錄時(shí)由用戶自己配置服務(wù)器地址以及端口號(hào)，并存儲(chǔ)在了session中。如下圖所示：
用戶自己配置服務(wù)器地址
4.最后統(tǒng)一配置服務(wù)器請(qǐng)求地址
Vue.prototype.BASE_URL = localStorage.getItem('BASE_URL') // 公共的服務(wù)器地址
以上就是vue打包之后配置統(tǒng)一請(qǐng)求地址的詳細(xì)內(nèi)容，更多關(guān)于vue打包請(qǐng)求地址配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用el-row及el-col頁面縮放時(shí)出現(xiàn)空行的問題及解決
這篇文章主要介紹了使用el-row及el-col頁面縮放時(shí)出現(xiàn)空行的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue封裝組件利器之$attrs、$listeners的使用
vue通信手段有很多種,props/emit、vuex、event bus、provide/inject等,還有一種通信方式,那就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于Vue封裝組件利器之$attrs、$listeners使用的相關(guān)資料,需要的朋友可以參考下2021-12-12
Vue3前端生成隨機(jī)id(生成?UUID)實(shí)際運(yùn)用
前端在做增刪改查時(shí)通常會(huì)使??個(gè)唯?數(shù)值做為數(shù)據(jù)的key值,下面這篇文章主要給大家介紹了關(guān)于Vue3前端生成隨機(jī)id(生成?UUID)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04
vue?eslint報(bào)錯(cuò):Component?name?“xxxxx“?should?always?be?
新手在使用腳手架時(shí)總會(huì)報(bào)各種錯(cuò),下面這篇文章主要給大家介紹了關(guān)于vue?eslint報(bào)錯(cuò):Component?name?“xxxxx“?should?always?be?multi-word.eslintvue的4種解決方案,需要的朋友可以參考下2022-07-07
Vite+Vue3.0+ElementPlus+axios+TS搭建項(xiàng)目全過程
文章主要介紹了如何使用Vite構(gòu)建項(xiàng)目,包括創(chuàng)建項(xiàng)目、代碼規(guī)范（eslint、husky、prettti等等、EditorConfig配置等）,項(xiàng)目配置（CSS預(yù)處理器、樣式重置、環(huán)境變量配置、axios封裝、本地存儲(chǔ)封裝）和開發(fā)生產(chǎn)環(huán)境配置等內(nèi)容2026-04-04
Vue使用axios(Ajax)+ElementUI實(shí)現(xiàn)登錄實(shí)踐
本文介紹了如何使用Vue和ElementUI框架創(chuàng)建一個(gè)登錄頁面,并實(shí)現(xiàn)前后端交互,同時(shí),還討論了跨域問題的解決方案以及ES6中的箭頭函數(shù)2026-03-03
vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)
在本篇文章和里小編給各位總結(jié)了關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式以及相關(guān)代碼，需要的朋友們可以學(xué)習(xí)下。2020-05-05
這篇文章主要介紹了vue中render函數(shù)的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
本文介紹了如何刪除全局和本地的webpack及其CLI,并提供了檢查webpack殘余文件的方法,總結(jié)了個(gè)人的操作經(jīng)驗(yàn),旨在為讀者提供參考,并期待獲得更多支持2024-09-09
詳解讓sublime text3支持Vue語法高亮顯示的示例
本篇文章主要介紹了讓sublime text3支持Vue語法高亮顯示的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09