nginx部署前端项目后刷新浏览器报错404问题解决

 更新时间:2023年11月14日 09:53:22   作者:java李杨勇  
现在前端页面部署正常访问,但是刷新的时候出现了404,所以下面给整理下,这篇文章主要给大家介绍了关于nginx部署前端项目后刷新浏览器报错404问题的解决办法,需要的朋友可以参考下

问题: Vue项目打包部署Nginx服务器后,刷新页面后出现404的问题。

原因: 加载单页应用后路由改变均由浏览器处理,而刷新时将会请求当前的链接,而Nginx无法找到对应的页面。

解决:在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 地址发起请求

try_files $uri $uri/ /index.html;

尝试解析下列2个文件/文件夹(自动分辨出,IP后面的路径是文件还是文件夹), $uri/$uri/,

如果解析到,返回第一个,

如果都没有解析到,向127.0.0.1/index.html发起请求跳转(该路由必须真实,不然会报错)

#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;
        }
    }  
}

总结 

到此这篇关于nginx部署前端项目后刷新浏览器报错404问题解决的文章就介绍到这了,更多相关nginx部署前端刷新浏览器404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Nginx服务器配置HTTPS nginx.config 配置文件(教程)

    Nginx服务器配置HTTPS nginx.config 配置文件(教程)

    下面小编就为大家分享一篇Nginx服务器配置HTTPS nginx.config 配置文件(教程),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 深入理解nginx的access.log文件

    深入理解nginx的access.log文件

    NGINX软件会把每个用户访问网站的日志记录到指定的日志文件里,供网站者分析用户的浏览行为,本文主要介绍了nginx的access.log文件,感兴趣的可以了解一下
    2023-09-09
  • 对nginx-naxsi白名单规则详解

    对nginx-naxsi白名单规则详解

    今天小编就为大家分享一篇对nginx-naxsi白名单规则详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-08-08
  • 基于nginx的静态网页部署的实现

    基于nginx的静态网页部署的实现

    这篇文章主要介绍了基于nginx的静态网页部署的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 用Nginx反向代理Node.js的方法

    用Nginx反向代理Node.js的方法

    本篇文章主要介绍了用Nginx反向代理Node.js的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • windows7下安装PHP+nginx的方法

    windows7下安装PHP+nginx的方法

    这篇文章主要介绍了windows7下安装PHP+nginx的方法,较为详细的分析了Windows7环境下安装php与nginx服务器环境的具体步骤与相关设置技巧,需要的朋友可以参考下
    2016-05-05
  • Nginx生产环境平滑升级的实现

    Nginx生产环境平滑升级的实现

    本文主要介绍了Nginx生产环境平滑升级的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • Nginx、Apache、Lighttpd禁止目录执行php配置示例

    Nginx、Apache、Lighttpd禁止目录执行php配置示例

    这篇文章主要介绍了Nginx、Apache、Lighttpd禁止目录执行php配置示例,本文给出了单个目录、多个目录的禁止执行PHP的方法,需要的朋友可以参考下
    2014-09-09
  • Nginx正向反向代理区别及原理解析

    Nginx正向反向代理区别及原理解析

    这篇文章主要介绍了Nginx正向反向代理区别及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • Nginx配置SSL证书出错解决方案

    Nginx配置SSL证书出错解决方案

    这篇文章主要介绍了Nginx配置SSL证书出错解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11

最新评论