背景：前端Vue項目打包后部署在服務(wù)器上，而后端接口在另外一臺服務(wù)器。本地生產(chǎn)環(huán)境運(yùn)行時因為在Vue中配置了proxy代理，所以項目運(yùn)行正常。但是在服務(wù)器開發(fā)環(huán)境中，一直報錯404。
原因：在開發(fā)環(huán)境中設(shè)置了proxy代理后，打包時proxy代理就會失效，因為proxy代理并不會一起打包到開發(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反向代理配置有兩個地方
第一個 軟件面板上面這里面有一個配置，如果在這里配置代理不生效
第二個 就是在打包生產(chǎn)環(huán)境上傳到服務(wù)器上的網(wǎng)站設(shè)置里面
?在配置文件中添加文章來源：http://www.zghlxwxcb.cn/news/detail-696697.html
location /api/
{
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://xx.xxx.xxx.xx/; //后端的請求接口
}
問題解決。文章來源地址http://www.zghlxwxcb.cn/news/detail-696697.html
到了這里，關(guān)于Vue項目打包到服務(wù)器后請求接口報錯404的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
