關(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)文章
最近發(fā)現(xiàn)很多要求Vue3的技術(shù)了,不得不說(shuō)it技術(shù)的更新真的太快了,作為vue2老用戶(hù),我們?cè)趯W(xué)習(xí)Vue3前應(yīng)該了解他們的區(qū)別以及背后的原因,下面這篇文章主要給大家介紹了關(guān)于vue2和vue3區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue 實(shí)例事件,結(jié)合簡(jiǎn)單示例形勢(shì)分析了vue.js事件響應(yīng)與頁(yè)面元素相關(guān)操作技巧,需要的朋友可以參考下2019-09-09
基于Vue、Vuex、Vue-router實(shí)現(xiàn)的購(gòu)物商城(原生切換動(dòng)畫(huà))效果
這篇文章主要介紹了基于Vue、Vuex、Vue-router實(shí)現(xiàn)的購(gòu)物商城(原生切換動(dòng)畫(huà))效果,需要的朋友可以參考下2018-01-01
Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例
這篇文章主要介紹了Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
今天小編就為大家分享一篇vue+element導(dǎo)航欄高亮顯示的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue如何實(shí)現(xiàn)文件上傳及預(yù)覽問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍
后臺(tái)項(xiàng)目想使用時(shí)間選擇器選擇一段時(shí)間進(jìn)行數(shù)據(jù)篩選,所以下面這篇文章主要給大家介紹了關(guān)于Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue3+vite+ts之a(chǎn)xios的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue設(shè)置一開(kāi)始進(jìn)入的頁(yè)面教程
今天小編就為大家分享一篇vue設(shè)置一開(kāi)始進(jìn)入的頁(yè)面教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了詳解vue-router 初始化時(shí)做了什么,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06