關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問(wèn)題
更新時(shí)間：2022年04月14日 11:08:48 作者：ma_pei
這篇文章主要介紹了關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
proxyTable配置和部署服務(wù)器
在本地創(chuàng)建node.js服務(wù)器，前端訪問(wèn)本地接口需要設(shè)置跨域
1.在config中的index
找到proxyTable，完成以下設(shè)置
proxyTable: {
‘/api': {
target: ‘http://localhost:8808/', //目標(biāo)接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
‘^/api': ‘/' //重寫(xiě)接口
}
}
},
2.在調(diào)取接口的方法中
下面是node.js服務(wù)端的
切記：：：！??！配置完成后一定要重啟前端項(xiàng)目，要不然會(huì)報(bào)錯(cuò)
proxyTable代理參數(shù)含義
vue項(xiàng)目里，找到index.js文件，再proxyTable 寫(xiě)入相應(yīng)的代理即可，網(wǎng)上有些說(shuō)自己新建一個(gè)vue.config.js文件，項(xiàng)目啟動(dòng)時(shí)會(huì)自己導(dǎo)入，也是可以的
proxyTable: {
? ? ? // 這里配置 '/api' 就等價(jià)于 target , 你在鏈接里訪問(wèn) /api === http://localhost:54321
? ? ? '/api': {//該api可以自定義，比如寫(xiě)成abc，但同時(shí)下方的/^api也要改成/^abc了
? ? ? ? target: 'http://localhost:54321/', // 服務(wù)器的接口地址，即你要訪問(wèn)的真實(shí)地址,http或者h(yuǎn)ttps都可以 // ? ? ? ?http://localhost:54321/json.data.json,
? ? ? ? changeOrigin: true, // 是否是跨域請(qǐng)求?肯定是啊,不跨域就沒(méi)有必要配置這個(gè)proxyTable了.
? ? ? ? ? logLevel: 'debug',//調(diào)試時(shí)，可以輸出代理后的真實(shí)地址是什么，上線時(shí)注釋掉即可
? ? ? ? pathRewirte: {
? ? ? ? ? // 這里是追加鏈接,比如真是接口里包含了 /api,就需要這樣配置.以下兩種方式任寫(xiě)一種即可
?
? ? ? ? ? ? //方式一，留空，不寫(xiě)
? ? ? ? ? ? ?'/^api': '', //代表你在axios里的請(qǐng)求'/api/info' = http://localhost:54321/info
?
? ? ? ? ? ? //方式二，重寫(xiě)
? ? ? ? ? ? '/^api': 'api/', //代表你在axios里的請(qǐng)求'/api/info' = http://localhost:54321/api/info
?? ? ? ? }
? ? ? }
? ? ?},
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在項(xiàng)目中經(jīng)常會(huì)復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時(shí)將它們?cè)O(shè)為全局的就顯得很重要了,下面這篇文章主要給大家介紹了關(guān)于vue如何定義全局變量和全局方法的相關(guān)資料,需要的朋友可以參考下2023-04-04
在vue項(xiàng)目中利用popstate處理頁(yè)面返回的操作介紹
這篇文章主要介紹了在vue項(xiàng)目中利用popstate處理頁(yè)面返回的操作介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
實(shí)例詳解vue.js淺度監(jiān)聽(tīng)和深度監(jiān)聽(tīng)及watch用法
這篇文章主要介紹了vue.js淺度監(jiān)聽(tīng)和深度監(jiān)聽(tīng)及watch用法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
vue中實(shí)現(xiàn)彈出層動(dòng)畫(huà)效果的示例代碼
這篇文章主要介紹了vue中怎樣實(shí)現(xiàn)彈出層動(dòng)畫(huà)效果，由上而下漸漸顯示，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-09
el-input設(shè)置后綴顯示單位并阻止?jié)L輪微調(diào)的解決方法
在Element UI或Element Plus中,使用el-input組件時(shí),可以通過(guò)suffix插槽添加單位顯示,如果設(shè)置了type為'number',滾輪滾動(dòng)可能會(huì)導(dǎo)致數(shù)值微調(diào),解決方法是阻止?jié)L輪事件的默認(rèn)行為,并用CSS隱藏掉輸入框的上下箭頭,確保數(shù)值輸入的準(zhǔn)確性,這樣既美觀又提升了用戶體驗(yàn)2024-09-09
vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式
這篇文章主要介紹了vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08
Vue子組件props從父組件接收數(shù)據(jù)并存入data
這篇文章主要介紹了Vue子組件props從父組件接收數(shù)據(jù)并存入data的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例
今天小編就為大家分享一篇Vue中對(duì)拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3實(shí)現(xiàn)預(yù)覽PDF文件的多種方式(超簡(jiǎn)單)
在Vue項(xiàng)目中實(shí)現(xiàn)PDF文件預(yù)覽是許多開(kāi)發(fā)者可能會(huì)遇到的需求,尤其是在開(kāi)發(fā)海外后臺(tái)管理系統(tǒng)時(shí),由于某些用戶上傳的文件格式為PDF,而Vue本身并不直接支持PDF文件的預(yù)覽功能,這就需要借助一些第三方的插件或者工具來(lái)完成,下面詳細(xì)地介紹幾種在Vue3中實(shí)現(xiàn)PDF文件預(yù)覽的方法2025-03-03
Vue.js最佳實(shí)踐(五招助你成為vuejs大師)
這篇文章主要介紹了Vue.js最佳實(shí)踐,本文主要面向?qū)ο笫怯幸欢╲ue.js 編輯經(jīng)驗(yàn)的開(kāi)發(fā)者，需要的朋友可以參考下2018-05-05