需求：
vue打包后的文件要部署到不同的服務器上，ip不同，每次部署都要修改對應服務器的ip后打包上線，所以會出現(xiàn)頻繁打包的情況
問題：vue項目打包上線不同服務器，需要打包一次能夠動態(tài)的修改ip地址
思路1：
1.由于vue項目里面public文件在打包時不會被影響，所以可以在public文件夾下加入一個js文件，用來存儲ip接口
2.在js文件里：window.VITE_BASE_URL = '對應服務器請求的ip'
public>webconfig.js
// window.VITE_BASE_URL = '地址ip1'
// window.VITE_BASE_URL = '地址ip2'
window.VITE_BASE_URL = '地址ip3'
// 打包后手動修改這塊對應IP即可
3.這個ip可以存儲到window對象里，在入口文件index.html里引入public里面的js文件（這里要注意引入路徑，打包前和打包后index.html和public文件夾的層級關系）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="./webconfig.js"></script>
...
</head>
<body>
<div id="app">
...
</div>
</body>
</html>
4.修改所有用到基地址的請求，一般在axios基礎配置文件里，把從vue引入的ip換成window.VITE_BASE_URL
const config: {
base_url: string
result_code: number | string
default_headers: AxiosHeaders
request_timeout: number
} = {
// 拼接window.VITE_BASE_URL
base_url: window.VITE_BASE_URL + import.meta.env.VITE_API_URL,
result_code: 200,
request_timeout: 30000,
default_headers: 'application/json'
}
export { config }
5.打包時只要修改public文件里的window.VITE_BASE_URL的內(nèi)容對應到服務器就可以了
思路2：
1.請求接口的基本ip和瀏覽該網(wǎng)頁輸入的IP地址相同(端口可能不同)
2.在輸入網(wǎng)址后就獲取到網(wǎng)址欄的IP，還是在public文件夾里面添加一個js文件，index.html引入該文件
webconfig.js文件內(nèi)容
var baseUrl = location.protocol + '//' + location.host
baseUrl = baseUrl.slice(0, baseUrl.length - 5)
console.log('獲取的網(wǎng)址ip===>', baseUrl)
window.VITE_BASE_URL = baseUrl + '端口'
3.同思路1-第四步
4.這樣打包后就不用在去修改js文件，直接部署服務器就行
衍生問題：
我的vue項目中出現(xiàn)以下情況
按照上述的步驟實現(xiàn)動態(tài)獲取后，當token過期后，會觸發(fā)一個重新登錄的操作，當用戶點擊重新登錄后，跳轉(zhuǎn)登錄頁面，這時window.VITE_BASE_URL就獲取不到了(判斷時路徑重定向后，清除了寫入window的對象)，會導致請求接口地址錯誤
解決思路：
思路1.重新刷新讓index.html文件執(zhí)行一次，加載public里面的js文件重新在window對象里存入IP（當跳轉(zhuǎn)到登錄頁后，使用延遲器強制刷新頁面一次）
步驟：
(1)在路由加載前存入本地一個標識
// token過期檢測為請求接口的時候
// 執(zhí)行登出操作
// 此刻時機寫入
// 干掉token后再走一次路由讓它過router.beforeEach的校驗
window.location.href = window.location.href // 觸發(fā)路由校驗
localStorage.setItem('LOGIN_TIP', '1') // 本地存入刷新標識(2)根據(jù)標識刷新頁面
// 路由加載前
router.beforeEach(async (to, from, next) => {
if(token){
...
}else{
next(`/login?redirect=${to.fullPath}`) // 否則全部重定向到登錄頁
// token過期跳轉(zhuǎn)登錄頁后
if (localStorage.getItem('LOGIN_TIP')) { // 找到刷新標識
setTimeout(() => {
window.location.reload(true) // 強制刷新頁面
localStorage.removeItem('LOGIN_TIP') // 清除標識，不然會一直重復刷新
}, 1000) // 延遲不能為0，否則達不到效果
}
}
}3. 刷新會再次執(zhí)行index.html文件，從而執(zhí)行webconfig.js，寫入window.VITE_BASE_URL文章來源：http://www.zghlxwxcb.cn/news/detail-753852.html
END文章來源地址http://www.zghlxwxcb.cn/news/detail-753852.html
到了這里，關于vue打包部署到服務器，動態(tài)獲取(修改)對應服務器的請求ip的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
