设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 119|回复: 14

宝塔nginx部署前端页面刷新报404错误解决办法

[复制链接]

1

主题

57

回帖

137

积分

注册会员

积分
137
发表于 2024-4-20 08:12:06 | 显示全部楼层 |阅读模式
目录


问题:

当我们使用脚手架打包前端项目的时候,如果前端项目并没有静态化的配置,如以下

当我们刷新页面,或进行路由配置访问的时候就会报404的错误


原因:

这是因为通常我们做的vue项目属于单页面开发。所以只有index.html。解决这个bug也很简单。只需要将访问重定向到index.html这个页面,交由 index.html 去处理对应的路由跳转就好。

解决办法:修改nginx配置
  1. server {
  2.     listen   80; # 监听的端口
  3.     server_name  xx.xx.xxx.xx; # 处理的host地址 (请替换成你对应的项目访问 ip 或 域名)!!!
  4.     root    /usr/share/nginx/html; # vue项目存在的目录(替换成你对应的地址,如果你这是用docker部署的请改成你容器内的地址)
  5.    
  6.     # 下面两个配置是关键所在!!!!!!
  7.     location / {
  8.         try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
  9.         index  index.html index.htm;
  10.     }
  11.     #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
  12.     #因此需要rewrite到index.html中,然后交给路由在处理请求资源
  13.     location @router {
  14.         rewrite ^.*$ /index.html last;
  15.     }
  16. }
复制代码

将nginx配置好后,重新打开你的网页,就发现可以进行路由跳转了!!!

总结

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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

1

主题

41

回帖

100

积分

注册会员

积分
100
发表于 2024-4-28 23:17:24 | 显示全部楼层
这个话题真是有趣,我也对它感兴趣。

0

主题

35

回帖

68

积分

注册会员

积分
68
发表于 2024-5-9 09:12:48 | 显示全部楼层
友善的讨论氛围是非常重要的。
  • 打卡等级:偶尔看看
  • 打卡总天数:10
  • 打卡月天数:0
  • 打卡总奖励:180
  • 最近打卡:2024-06-20 09:02:38

9

主题

82

回帖

609

积分

高级会员

积分
609

推广达人宣传达人热心会员付费会员

发表于 2024-5-23 18:09:07 | 显示全部楼层
666666666666666666

0

主题

64

回帖

127

积分

注册会员

积分
127
发表于 2024-5-27 16:50:14 | 显示全部楼层
牛逼

1

主题

64

回帖

148

积分

注册会员

积分
148
发表于 2024-6-18 18:01:51 | 显示全部楼层
我不太确定,可能需要再确认一下。

1

主题

53

回帖

126

积分

注册会员

积分
126
发表于 2024-7-12 13:47:36 | 显示全部楼层
感谢分享,受益匪浅!

0

主题

50

回帖

99

积分

注册会员

积分
99
发表于 2024-7-25 08:25:41 | 显示全部楼层
你的信息来源是?我想了解更多。

0

主题

42

回帖

84

积分

注册会员

积分
84
发表于 2024-7-27 20:43:26 | 显示全部楼层
太棒了!感谢分享这个信息!

1

主题

55

回帖

140

积分

注册会员

积分
140
发表于 2024-8-9 16:58:52 | 显示全部楼层
我不太确定,可能需要再确认一下。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-24 08:51 , Processed in 0.097157 second(s), 28 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表