快捷導(dǎo)航

nginx部署前端項(xiàng)目后刷新瀏覽器報(bào)錯404問題解決

更新時間：2023年11月14日 09:53:22 作者：java李楊勇

現(xiàn)在前端頁面部署正常訪問,但是刷新的時候出現(xiàn)了404,所以下面給整理下,這篇文章主要給大家介紹了關(guān)于nginx部署前端項(xiàng)目后刷新瀏覽器報(bào)錯404問題的解決辦法,需要的朋友可以參考下

問題： Vue項(xiàng)目打包部署Nginx服務(wù)器后，刷新頁面后出現(xiàn)404的問題。

原因： 加載單頁應(yīng)用后路由改變均由瀏覽器處理，而刷新時將會請求當(dāng)前的鏈接，而Nginx無法找到對應(yīng)的頁面。

解決：在Nginx配置文件nginx.conf中加入如下配置：

try_files $uri $uri/ /index.html;

# 變量解釋

try_files 固定語法
$uri 指代home文件(ip地址后面的路徑，假如是127.0.0.1/index/a.png，那就指代index/a.png)
$uri/ 指代home文件夾
/index.html 向ip/index.html 地址發(fā)起請求

try_files $uri $uri/ /index.html;

嘗試解析下列2個文件/文件夾(自動分辨出，IP后面的路徑是文件還是文件夾)， $uri/$uri/，

如果解析到，返回第一個，

如果都沒有解析到，向127.0.0.1/index.html發(fā)起請求跳轉(zhuǎn)(該路由必須真實(shí)，不然會報(bào)錯）

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       8100;
        server_name  localhost;
        charset utf-8;
        location / {
            root   D:/deploy/web/http;
            index  index.html index.htm;
        }
    }   
     server {
        listen       80;
        server_name  localhost;
        charset utf-8;
        location / {
            root   D:/deploy/gn/http;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }  
}

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

OpenResty中實(shí)現(xiàn)按QPS、時間范圍、來源IP進(jìn)行限流的方法
OpenResty是一個基于Nginx與Lua的高性能Web平臺,它通過LuaJIT在Nginx中運(yùn)行高效的Lua腳本和模塊,可以用來處理復(fù)雜的網(wǎng)絡(luò)請求,并且支持各種流量控制和限制的功能,這篇文章主要介紹了OpenResty中實(shí)現(xiàn)按QPS、時間范圍、來源IP進(jìn)行限流,需要的朋友可以參考下
2024-02-02
詳解php+nginx 服務(wù)發(fā)生500 502錯誤排查思路
這篇文章主要介紹了詳解php+nginx 服務(wù)發(fā)生500 502錯誤排查思路，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
nginx修改上傳文件大小限制的方法
本篇文章主要介紹了nginx修改上傳文件大小限制的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。
2016-12-12
nginx從安裝到配置詳細(xì)說明(安裝,安全配置,防盜鏈,動靜分離,配置 HTTPS,性能優(yōu)化)
這篇文章主要介紹了nginx從安裝到配置詳細(xì)說明(安裝,安全配置,防盜鏈,動靜分離,配置 HTTPS,性能優(yōu)化,緩存,url重寫),需要的朋友可以參考下
2022-01-01
Nginx配置ssl實(shí)現(xiàn)https的全過程記錄
這篇文章主要給大家介紹了關(guān)于Nginx配置ssl實(shí)現(xiàn)https的相關(guān)資料,文章通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2022-03-03
Nginx隱藏和偽造版本號的操作方法
這篇文章主要介紹了Nginx隱藏和偽造版本號的操作方法,本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-12-12
nginx配置相關(guān)介紹
本文為大家介紹一下nginx配置的相關(guān)介紹，供大家參考
2013-02-02
nginx常用基礎(chǔ)模塊詳解
文章詳細(xì)介紹了Nginx的強(qiáng)大功能及其高度模塊化設(shè)計(jì),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2026-03-03
Windows的CMD窗口如何查看并殺死nginx進(jìn)程
這篇文章主要介紹了Windows的CMD窗口如何查看并殺死nginx進(jìn)程問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-06-06
Nginx服務(wù)器屏蔽與禁止屏蔽網(wǎng)絡(luò)爬蟲的方法
今天小編就為大家分享一篇關(guān)于Nginx服務(wù)器屏蔽與禁止屏蔽網(wǎng)絡(luò)爬蟲的方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-03-03