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)文章
這篇文章主要為大家詳細(xì)介紹了vue中常見的加密方式實現(xiàn),例如js-base64、crypto-js、jsencrypt、bcryptjs,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2023-11-11
vue Cli 環(huán)境刪除與重裝教程 - 版本文檔
這篇文章主要介紹了vue Cli 環(huán)境刪除與重裝教程 - 版本文檔，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue項目如何改變屏幕尺寸重新刷新頁面-計算頁面尺寸，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue 實現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)
今天小編就為大家分享一篇Vue 實現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
在移動端使用vue-router和keep-alive的方法示例
這篇文章主要介紹了在移動端使用vue-router和keep-alive的方法示例，vue-router與keep-alive提供的路由體驗與移動端是有一定差別的，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue如何重置data的所有屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue通過elementUI組件實現(xiàn)圖片預(yù)覽效果
我們在開發(fā)中經(jīng)常會遇到通過點擊某個按鈕或者文字實現(xiàn)圖片的預(yù)覽功能,這里我們分別介紹vue2和vue3里面如何實現(xiàn)圖片預(yù)覽方法,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了vue之?dāng)?shù)據(jù)交互實例代碼，vue中也存在像ajax和jsonp的數(shù)據(jù)交互，實現(xiàn)向服務(wù)器獲取數(shù)據(jù)，有興趣的可以了解一下2017-06-06
vue組件講解(is屬性的用法)模板標(biāo)簽替換操作
這篇文章主要介紹了vue組件講解(is屬性的用法)模板標(biāo)簽替換操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue項目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決
這篇文章主要介紹了vue項目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07