vue部署正式環(huán)境上傳nginx后遇到的問題及解決
更新時(shí)間：2025年12月25日 09:10:43 作者：鶴入云霄
在Nginx中配置服務(wù)器時(shí),如果頁面和靜態(tài)資源無法訪問,并且后端接口被誤解為前端頁面請(qǐng)求,可以通過為`www-data`用戶賦予目錄訪問權(quán)限來解決
頁面不能訪問
在nginx中server中添加配置
重啟nginx：sudo systemctl restart nginx
root /home/admin/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}頁面仍不能訪問 & 靜態(tài)資源無法訪問 & GET https://xxx.js net::ERR_ABORTED 403 (Forbidden)
找到nginx中第一行user用戶（默認(rèn)www-data）
執(zhí)行如下命令為www-data用戶賦予目錄訪問權(quán)限
sudo chown -R www-data:www-data /home/user/dist
后端接口無法訪問 & 訪問后端接口被理解成前端頁面請(qǐng)求
在nginx中server中添加配置
重啟nginx
location /api {
proxy_pass http://IP:PORT;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法
本篇文章將介紹使用Vue2開發(fā)前后端分離項(xiàng)目時(shí),前端打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法,文中通過圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
vue利用Moment插件格式化時(shí)間的實(shí)例代碼
Moment.js 是一個(gè) JavaScript 日期處理類庫(kù)，用于解析、檢驗(yàn)、操作、以及顯示日期。這篇文章主要給大家介紹了關(guān)于vue利用Moment插件格式化時(shí)間的相關(guān)資料,需要的朋友可以參考下2021-05-05
Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮
這篇文章主要為大家詳細(xì)介紹了Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了Vue手寫實(shí)現(xiàn)異步更新詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-08-08
這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了一篇關(guān)于Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)，有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11
掌握Qwik.js，輕松應(yīng)對(duì)前端SSR渲染問題
掌握Qwik.js,輕松應(yīng)對(duì)前端SSR渲染問題！本指南將為你揭示如何使用這款強(qiáng)大的框架,讓你在前端開發(fā)中游刃有余2023-12-12
基于vue-cli3和element實(shí)現(xiàn)登陸頁面
這篇文章主要介紹了vue-cli3和element做一個(gè)簡(jiǎn)單的登陸頁面本文實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關(guān)于Vue關(guān)閉當(dāng)前彈窗頁面的兩種方式,這是最近項(xiàng)目中遇到的一個(gè)需求,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vue?設(shè)置圖片不轉(zhuǎn)為base64的方式
這篇文章主要介紹了Vue實(shí)現(xiàn)設(shè)置圖片不轉(zhuǎn)為base64的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02