欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項(xiàng)目打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404的解決

 更新時(shí)間：2023年05月18日 09:43:28   作者：Tearl  
這篇文章主要介紹了Vue項(xiàng)目打包到服務(wù)器后請(qǐng)求接口報(bào)錯(cuò)404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)求接口
}

問題解決。

vue項(xiàng)目打包后上傳到服務(wù)器，訪問頁面報(bào)錯(cuò)net::ERR_ABORTED 404 (Not Found)

當(dāng)訪問頁面時(shí)出現(xiàn)以下報(bào)錯(cuò)該如何解決？

首先需要?jiǎng)?chuàng)建文件

然后復(fù)制以下代碼到vue.config.js

module.exports = {
    publicPath: "./"
}

現(xiàn)在build上傳就可以正常訪問了

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論