Vue項(xiàng)目打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404的解決
vue打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404
前端Vue項(xiàng)目打包后部署在服務(wù)器上，而后端接口在另外一臺(tái)服務(wù)器。
本地生產(chǎn)環(huán)境運(yùn)行時(shí)因?yàn)樵赩ue中配置了proxy代理，所以項(xiàng)目運(yùn)行正常。但是在服務(wù)器開發(fā)環(huán)境中，一直報(bào)錯(cuò)404。
原因
在開發(fā)環(huán)境中設(shè)置了proxy代理后，打包時(shí)proxy代理就會(huì)失效，因?yàn)閜roxy代理并不會(huì)一起打包到開發(fā)環(huán)境的dist文件夾下。
解決方案
1.在開發(fā)環(huán)境中配置proxy反向代理
.env.development 開發(fā)環(huán)境
# just a flag ENV = 'development' Mock: true # base api VUE_APP_BASE_API = 'http://localhost:3000/' //這里放開發(fā)環(huán)境的接口地址
.env.production 生產(chǎn)環(huán)境
# just a flag ENV = 'production' Mock: false # base api VUE_APP_BASE_API = 'http://xx.xxx.xxx.xx/' //這里放生產(chǎn)環(huán)境的接口地址
2.服務(wù)器配置Nginx反向代理
以寶塔舉例：Nginx反向代理配置有兩個(gè)地方
第一個(gè) 軟件面板上面這里面有一個(gè)配置，如果在這里配置代理不生效
第二個(gè) 就是在打包生產(chǎn)環(huán)境上傳到服務(wù)器上的網(wǎng)站設(shè)置里面
在配置文件中添加
location /api/
{
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://xx.xxx.xxx.xx/; //后端的請(qǐng)求接口
}問(wèn)題解決。
vue項(xiàng)目打包后上傳到服務(wù)器，訪問(wèn)頁(yè)面報(bào)錯(cuò)net::ERR_ABORTED 404 (Not Found)
當(dāng)訪問(wèn)頁(yè)面時(shí)出現(xiàn)以下報(bào)錯(cuò)該如何解決？
首先需要?jiǎng)?chuàng)建文件
然后復(fù)制以下代碼到vue.config.js
module.exports = {
publicPath: "./"
}現(xiàn)在build上傳就可以正常訪問(wèn)了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中常見的加密方式實(shí)現(xiàn),例如js-base64、crypto-js、jsencrypt、bcryptjs,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2023-11-11
vue Cli 環(huán)境刪除與重裝教程 - 版本文檔
這篇文章主要介紹了vue Cli 環(huán)境刪除與重裝教程 - 版本文檔，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁(yè)面-計(jì)算頁(yè)面尺寸
這篇文章主要介紹了Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁(yè)面-計(jì)算頁(yè)面尺寸，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue 實(shí)現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
在移動(dòng)端使用vue-router和keep-alive的方法示例
這篇文章主要介紹了在移動(dòng)端使用vue-router和keep-alive的方法示例，vue-router與keep-alive提供的路由體驗(yàn)與移動(dòng)端是有一定差別的，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue如何重置data的所有屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue通過(guò)elementUI組件實(shí)現(xiàn)圖片預(yù)覽效果
我們?cè)陂_發(fā)中經(jīng)常會(huì)遇到通過(guò)點(diǎn)擊某個(gè)按鈕或者文字實(shí)現(xiàn)圖片的預(yù)覽功能,這里我們分別介紹vue2和vue3里面如何實(shí)現(xiàn)圖片預(yù)覽方法,需要的朋友可以參考下2023-09-09
vue之?dāng)?shù)據(jù)交互實(shí)例代碼
本篇文章主要介紹了vue之?dāng)?shù)據(jù)交互實(shí)例代碼，vue中也存在像ajax和jsonp的數(shù)據(jù)交互，實(shí)現(xiàn)向服務(wù)器獲取數(shù)據(jù)，有興趣的可以了解一下2017-06-06
vue組件講解(is屬性的用法)模板標(biāo)簽替換操作
這篇文章主要介紹了vue組件講解(is屬性的用法)模板標(biāo)簽替換操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07