快捷導(dǎo)航

一文解決Nginx部署Vue項(xiàng)目刷新頁(yè)面404問(wèn)題

更新時(shí)間：2025年10月13日 10:53:35 作者：lskblog

當(dāng)使用Nginx部署Vue項(xiàng)目（或其他前端SPA應(yīng)用）時(shí),直接訪問(wèn)首頁(yè)可以正常顯示,但刷新非首頁(yè)路由或直接訪問(wèn)子路由時(shí),會(huì)出現(xiàn)404錯(cuò)誤,所以本文給大家介紹了Nginx部署Vue項(xiàng)目刷新頁(yè)面404問(wèn)題的解決方法,需要的朋友可以參考下

問(wèn)題描述

當(dāng)使用Nginx部署Vue項(xiàng)目（或其他前端SPA應(yīng)用）時(shí)，直接訪問(wèn)首頁(yè)可以正常顯示，但刷新非首頁(yè)路由或直接訪問(wèn)子路由時(shí)，會(huì)出現(xiàn)404錯(cuò)誤。

問(wèn)題原因

這是因?yàn)閂ue作為單頁(yè)應(yīng)用(SPA)，其路由是由前端JavaScript控制的。當(dāng)你在瀏覽器中直接訪問(wèn)一個(gè)子路由（如/about）時(shí)：

瀏覽器會(huì)向服務(wù)器請(qǐng)求/about這個(gè)路徑
Nginx會(huì)嘗試在服務(wù)器上查找/about這個(gè)文件或目錄
由于Vue是SPA，實(shí)際上只有index.html一個(gè)入口文件，所以Nginx找不到/about資源，返回404

解決方案

方案一：修改Nginx配置（推薦）

在Nginx配置中添加try_files指令，將所有請(qǐng)求重定向到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;
    }

    # 防止直接訪問(wèn)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會(huì)變成類似http://example.com/#/about的形式，刷新不會(huì)出現(xiàn)問(wèn)題，但URL不夠美觀。

配置說(shuō)明

try_files $uri $uri/ /index.html：Nginx會(huì)依次嘗試查找：

精確匹配的文件（$uri）
匹配的目錄（$uri/）
如果都找不到，則返回index.html，由前端路由處理

驗(yàn)證配置

修改配置后，執(zhí)行以下命令驗(yàn)證并重載Nginx：

sudo nginx -t  # 測(cè)試配置是否正確
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代理

通過(guò)以上配置，你的Vue項(xiàng)目應(yīng)該可以在Nginx上正常運(yùn)行，并且刷新頁(yè)面也不會(huì)出現(xiàn)404錯(cuò)誤了。

到此這篇關(guān)于一文解決Nginx部署Vue項(xiàng)目刷新頁(yè)面404問(wèn)題的文章就介紹到這了,更多相關(guān)Nginx部署Vue刷新頁(yè)面404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: