vue项目部署到服务器上路由模式为history时,刷新页面报404的问题

本文介绍了如何在Nginx配置中使用try_files避免404错误,通过指定root路径和index.html作为入口,确保请求能正确映射到路由页面。重启Nginx后,浏览器刷新将不再显示404错误。
摘要由CSDN通过智能技术生成

解决办法:在nginx配置文件中添加以下配置项
因为前面配了root路径,所以下面就可以不加root

location / {
    root 你的项目路径 //如果前面没配的话,记得加上,前面配了,这一行可以省略
    try_files $uri $uri/ /index.html
}

举个例子:请求127.0.0.1/desktop 会依次寻找

1.root路径下desktop文件

2.root路径下desktop文件夹下的index文件

3.最后请求root路径下的/index.html文件

如果前面两个都匹配不上的话,就会重写到index.html,因为这个index.html使我们项目的入口,index.html里面会读取当时打包好的js文件,就可以读取到路由配置,以实现我们浏览器的url对应的路由页面

重启 nginx,然后随意刷新浏览器,再也不会出现404 问题了

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一言^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值