快捷導(dǎo)航

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

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

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

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

原因： 加載單頁應(yīng)用后路由改變均由瀏覽器處理，而刷新時(shí)將會(huì)請(qǐng)求當(dāng)前的鏈接，而Nginx無法找到對(duì)應(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ā)起請(qǐng)求

try_files $uri $uri/ /index.html;

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

如果解析到，返回第一個(gè)，

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

#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)錯(cuò)404問題解決的文章就介紹到這了,更多相關(guān)nginx部署前端刷新瀏覽器404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Nginx結(jié)合keepalived實(shí)現(xiàn)集群
本文主要介紹了Nginx結(jié)合keepalived實(shí)現(xiàn)集群,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-05-05
nginx臨時(shí)搭建rtmp服務(wù)器的方法實(shí)現(xiàn)
nginx是一款優(yōu)秀的反向代理工具,通過Nginx自帶的rtmp模塊,也可以實(shí)現(xiàn)rtmp服務(wù)器的搭建，本文主要介紹了nginx臨時(shí)搭建rtmp服務(wù)器，具有一定的參考價(jià)值，感興趣的可以了解一下
2024-02-02
nginx?http?499錯(cuò)誤碼詳解以及解決辦法
HTTP狀態(tài)碼出現(xiàn)499錯(cuò)誤有多種情況,499錯(cuò)誤是什么?這篇文章主要給大家介紹了關(guān)于nginx?http?499錯(cuò)誤碼以及解決辦法的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
Nginx使用Gzip算法對(duì)報(bào)文進(jìn)行壓縮詳解
這篇文章主要給大家介紹了關(guān)于Nginx的Gzip功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
Nginx更換ssl證書不生效的問題解決
本文主要介紹了Nginx配置中更換SSL證書后,新證書不生效的問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-12-12
詳解Nginx 被動(dòng)檢查服務(wù)器的存活狀態(tài)
Nginx 可以持續(xù)測(cè)試您的上游服務(wù)器，避免出現(xiàn)故障的服務(wù)器，并將恢復(fù)的服務(wù)器優(yōu)雅地添加到負(fù)載均衡組中。這篇文章主要介紹了Nginx 被動(dòng)檢查服務(wù)器的存活狀態(tài),需要的朋友可以參考下
2021-10-10
Nginx反向代理之proxy_redirect指令的實(shí)現(xiàn)
proxy_redirect指令是用來重置頭信息中的"Location"和"Refresh"的值,本文就來詳細(xì)的介紹一下如何使用,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-08-08
Centos系統(tǒng)中如何在指定位置下安裝Nginx
這篇文章主要介紹了Centos系統(tǒng)中如何在指定位置下安裝Nginx，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-07-07
nginx配置PC站手機(jī)站分離實(shí)現(xiàn)重定向
這篇文章主要介紹了nginx配置PC站手機(jī)站分離實(shí)現(xiàn)重定向，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Nginx配置文件的使用以及實(shí)現(xiàn)負(fù)載均衡的4種常用方式
這篇文章主要介紹了Nginx配置文件的使用以及實(shí)現(xiàn)負(fù)載均衡的4種常用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04