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

Vue項目打包到服務(wù)器后請求接口報錯404的解決

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

vue打包到服務(wù)器后請求接口報錯404

前端Vue項目打包后部署在服務(wù)器上，而后端接口在另外一臺服務(wù)器。

本地生產(chǎn)環(huán)境運行時因為在Vue中配置了proxy代理，所以項目運行正常。但是在服務(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è)置里面

在配置文件中添加

location /api/ 
{
    rewrite  ^.+api/?(.*)$ /$1 break;
    proxy_pass http://xx.xxx.xxx.xx/;     //后端的請求接口
}

問題解決。

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

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

首先需要創(chuàng)建文件

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

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

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

總結(jié)

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

相關(guān)文章

最新評論