一文解決Nginx部署Vue項(xiàng)目刷新頁面404問題
問題描述
當(dāng)使用Nginx部署Vue項(xiàng)目（或其他前端SPA應(yīng)用）時，直接訪問首頁可以正常顯示，但刷新非首頁路由或直接訪問子路由時，會出現(xiàn)404錯誤。
問題原因
這是因?yàn)閂ue作為單頁應(yīng)用(SPA)，其路由是由前端JavaScript控制的。當(dāng)你在瀏覽器中直接訪問一個子路由（如/about）時：
- 瀏覽器會向服務(wù)器請求
/about這個路徑 - Nginx會嘗試在服務(wù)器上查找
/about這個文件或目錄 - 由于Vue是SPA，實(shí)際上只有
index.html一個入口文件，所以Nginx找不到/about資源，返回404
解決方案
方案一：修改Nginx配置（推薦）
在Nginx配置中添加try_files指令，將所有請求重定向到index.html：
server {
listen 80;
server_name yourdomain.com;
root /path/to/your/vue/dist;
location / {
try_files $uri $uri/ /index.html;
}
}
或者更完整的配置示例：
server {
listen 80;
server_name yourdomain.com;
root /path/to/your/vue/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# 靜態(tài)資源緩存配置
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires max;
log_not_found off;
}
# 防止直接訪問index.html
location = /index.html {
internal;
}
}
方案二：使用Vue Router的history模式
確保你的Vue Router配置為history模式：
const router = new VueRouter({
mode: 'history',
routes: [...]
})
方案三：使用hash模式（不推薦）
如果你不想修改服務(wù)器配置，可以將路由模式改為hash模式：
const router = new VueRouter({
mode: 'hash',
routes: [...]
})
這樣URL會變成類似http://example.com/#/about的形式，刷新不會出現(xiàn)問題，但URL不夠美觀。
配置說明
try_files $uri $uri/ /index.html：Nginx會依次嘗試查找：
- 精確匹配的文件（
$uri） - 匹配的目錄（
$uri/） - 如果都找不到，則返回
index.html，由前端路由處理
驗(yàn)證配置
修改配置后，執(zhí)行以下命令驗(yàn)證并重載Nginx：
sudo nginx -t # 測試配置是否正確 sudo nginx -s reload # 重載配置
其他注意事項(xiàng)
- Base URL：如果你的項(xiàng)目不是部署在根路徑下，需要設(shè)置Vue Router的base選項(xiàng)和Nginx的location匹配
- 靜態(tài)資源：確保靜態(tài)資源路徑正確，可能需要配置publicPath
- 后端API：如果有后端API，需要配置Nginx代理
通過以上配置，你的Vue項(xiàng)目應(yīng)該可以在Nginx上正常運(yùn)行，并且刷新頁面也不會出現(xiàn)404錯誤了。
到此這篇關(guān)于一文解決Nginx部署Vue項(xiàng)目刷新頁面404問題的文章就介紹到這了,更多相關(guān)Nginx部署Vue刷新頁面404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
CentOS 7.0下nginx實(shí)現(xiàn)每天定時分割日志
大家都知道Nginx產(chǎn)生的日志都是存在一個文件，隨著網(wǎng)站運(yùn)行時間越長，日志文件的大小也在不斷增長，所以這個時候就需要實(shí)現(xiàn)定時分割，這篇文章主要介紹了在CentOS 7.0下nginx實(shí)現(xiàn)每天定時分割日志的相關(guān)資料，需要的朋友可以參考下。2017-04-04
這篇文章主要介紹了Nginx單IP地址配置多個SSL證書的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
阿里云部署Ubuntu 1.4 Flask + WSGI + Nginx 詳解
本文解決的是 Flask 最后一公里的問題：Linux 部署,需要的朋友可以參考下2017-12-12
Nginx反向代理轉(zhuǎn)發(fā)tomcat的實(shí)現(xiàn)
本文主要介紹了Nginx反向代理轉(zhuǎn)發(fā)tomcat的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了詳解Nginx服務(wù)器和iOS的HTTPS安全通信的相關(guān)資料,需要的朋友可以參考下2017-06-06
nginx basic認(rèn)證的實(shí)現(xiàn)示例
auth_basic作為一個認(rèn)證模塊,在apache和nginx中都很常用,本文主要介紹了nginx basic認(rèn)證的實(shí)現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2024-08-08
nginx+goreplay實(shí)現(xiàn)業(yè)務(wù)流量壓測的示例代碼
通過Nginx和GoReplay的組合,可以實(shí)現(xiàn)生產(chǎn)環(huán)境流量的實(shí)時拷貝和回放,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-07-07
nginx 配置虛擬主機(jī),實(shí)現(xiàn)在一個服務(wù)器可以訪問多個網(wǎng)站的方法
下面小編就為大家分享一篇nginx 配置虛擬主機(jī),實(shí)現(xiàn)在一個服務(wù)器可以訪問多個網(wǎng)站的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
Nginx對網(wǎng)段內(nèi)ip的連接數(shù)限流配置詳解
這篇文章主要介紹了Nginx對網(wǎng)段內(nèi)ip的連接數(shù)限流配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Nginx+cpolar實(shí)現(xiàn)內(nèi)網(wǎng)穿透多個Windows Web站點(diǎn)端口的步驟詳解
這篇文章主要給大家介紹了Nginx+cpolar實(shí)現(xiàn)內(nèi)網(wǎng)穿透多個Windows Web站點(diǎn)端口的詳細(xì)步驟,文章通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10