nginx部署前端项目后刷新浏览器报错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发起请求跳转(该路由必须真实,不然会报错)
文章来源地址https://www.toymoban.com/news/detail-522936.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的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】Vue 部署上线清除浏览器缓存的方式

    修改根目录index.html 在 head 里面添加下面代码 1 2 meta http-equiv = \\\"pragram\\\" content = \\\"no-cache\\\" meta http-equiv = \\\"cache-control\\\" content = \\\"no-cache, no-store, must-revalidate\\\"   配置 nginx 不缓存 html vue默认配置,打包后css和js的名字后面都加了哈希值,不会有缓存问题。但是index.html在服务器端可能是有

    2024年02月09日
    浏览(40)
  • Unity打包浏览器端网页HTML(WebGL)以及部署到Tomcat浏览器访问报错问题解决

    Unity 默认打包是 PC 端客户端程序,想要打包浏览器可以访问的 WebGL 网页,需要修改一些配置。 我使用的 Unity 版本是 2021.3.24f1 。 1.1 点击 File —— Build Settings... 1.2 点击 Add Open Scenes .把全部场景加入 Scene In Build 列表中 网上说不全部加进去会找不到需要跳转的场景,我还没涉

    2024年02月16日
    浏览(57)
  • 浏览器刷新页面,缓存的处理方式,强制刷新

    刷新页面的缓存处理的方式对比 地址栏回车/直接访问 URL 保留强缓存,保留协商缓存,走正常请求流程 点击浏览器刷新按钮 忽略强缓存,保留协商缓存 按f5【command + r】 忽略强缓存,保留协商缓存 ctrl + f5 【command + shift + r 】 忽略强缓存,忽略协商缓存,从服务器端请求最

    2024年02月02日
    浏览(49)
  • 程序部署到tomcat之后,在浏览器上输入URL报错404,该如何定位?

    目录 1.首先检查url是否正确 2.检查war包,查看部署之后的目录结构 3.查看tomcat日志 4.通过postman发请求 spring项目打包成war包再部署到tomcat上时,项目的路径要加上war包的名称,通过更改war包的名称,就可以更改访问路径。 格式为:协议://ip:端口号/war包名称/请求路径       

    2024年01月18日
    浏览(46)
  • Edge 浏览器设置自动刷新

    要在 Microsoft Edge 浏览器中设置自动刷新,您可以使用第三方扩展来实现这一功能。目前,Edge 浏览器本身并没有内置的自动刷新功能。以下是启用自动刷新的一般步骤: 打开 Microsoft Edge 扩展商店:首先,在 Edge 浏览器中打开扩展商店。您可以通过点击浏览器右上角的三个水

    2024年02月02日
    浏览(170)
  • Edge浏览器设置自动刷新

    你可以在 Edge 的扩展商店中搜索并安装这些扩展。以下是一些常见的扩展: Super Auto Refresh: 提供了强大的自动刷新功能,可以根据自定义的时间间隔进行刷新。 Auto Refresh: 允许你设置页面刷新的间隔。 Edge 浏览器的开发者工具中也有自动刷新的选项: 打开开发者工具:按 F

    2024年02月02日
    浏览(68)
  • Edge 浏览器如何设置自动刷新

     Edge 浏览器设置自动刷新有两种方式 安装Edge浏览器自动刷新扩展 更改页面的源代码文件 目录 方式一:Edge 自动刷新扩展实现(推荐)  方式二:更改页面的源代码文件 实现页面自动刷新(不推荐) 方式一:Edge 自动刷新扩展实现(推荐) (1)打开Edge浏览器 (2)打开E

    2024年02月02日
    浏览(51)
  • mac如何强制刷新chorm浏览器

    在 macOS 上,你可以使用以下方法来强制刷新 Chrome 浏览器: 使用快捷键:按住 Shift 键 并同时点击 浏览器刷新按钮 。这会强制浏览器绕过缓存并重新加载当前页面。 使用开发者工具:按下 Option + Command + I 快捷键(或通过右键点击页面并选择 “Inspect”(检查)菜单)打开

    2024年02月15日
    浏览(92)
  • 整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误

    目录 一、关于 sockjs-client 依赖包 二、关于 highlight 依赖包 三、关于 swiper 依赖包 四、IE 不支持 ES6 语法 五、第三方插件引入导致 六、本地环境正常,生产环境仍旧白屏 这篇文章主要介绍了 Vue 项目在 IE 浏览器显示白屏并报错 SCRIPT1002: 语法错误 的案例 Bug 背景 :接手一个新

    2024年02月06日
    浏览(44)
  • 如何在 Edge 浏览器中设置自动刷新?

    确定学习主题:明确你希望学习的主题或领域。这可以是一个具体的技能、学科或兴趣领域。 制定学习目标:确定你希望在学习过程中实现的具体目标。目标应该是明确、可测量和可实现的。 划分学习内容:将学习主题分解为更小的子主题或概念。这样可以使学习过程更有

    2024年02月02日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包