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