Vue项目 history模式下 刷新出现404问题

最新推荐文章于 2025-06-12 10:26:27 发布
最新推荐文章于 2025-06-12 10:26:27 发布
阅读量397 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lichengwei816/article/details/136485277

在这里插入图片描述
2，修改nginx配置

location / {
 try_files $uri $uri/ @router;
  index index.html;
}
 
location @router {
  rewrite ^.*$ /index.html last;
}

在这里插入图片描述

Trier_
关注
Vue路由刷新时出现404问题的解决方案
ByteWhisper的博客
08-16 7824
这样，当在浏览器中刷新页面时，服务器会返回index.html，并由Vue Router来处理相应的路由逻辑。具体做法是，在路由跳转时使用history.pushState来修改URL，使其对应到正确的路由路径。然而，当用户手动刷新页面或直接输入某个路由地址时，由于服务器并没有为该路由提供相应的资源，就会导致404错误。根据具体情况选择适合的解决方案，可以有效地解决路由刷新时的404问题，并提升用户体验。当我们将项目部署到服务器的子目录时，配置正确的基本路径可以避免路由刷新时出现404问题。
vue的history模式返回404
爱coding的大尾巴的专栏
05-14 574
让找不到路径的url重定向到单页应用index.html中。这样也可以解决在支付宝内置浏览器直接拦截404的问题。
vue项目history模式刷新404问题
FGGIT的博客
02-01 7002
vue项目history模式刷新404问题
vue项目部署后，刷新提示404
最新发布
分享各类领域技术问题
06-12 639
vue项目部署后，刷新提示404
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端修改404错误页面的配置路径，让其指向到index.html。 警告： 因为这么做以后，你的服务器就不再返回 404 错误页面
Vue History模式刷新404白屏问题解决方案（Gin框架适配）
SuHongMu的博客
03-15 749
API实现URL跳转，不会触发页面刷新。如果直接访问这些路由时，服务端会尝试寻找对应的物理文件，从而导致404错误。前几天在网站上新增了/predict路由，写好后发现每次刷新都会出现404白屏的情况。如果使用nginx上部署vue项目，采用history模式，可以看看这位大佬的文章。Vue-router的history模式通过window.history。查找了资料后，发现是由于后端没有正确配置路由重定向导致。中正确配置路由文件，完善静态文件服务配置。和通配路由 (关键！
vue history 模式 刷新404 问题
前端的路上
03-25 4798
1. src和href的区别 src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。 href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。 2. 对HTML语义化的理解 语义化是指根据内容的结构化，选择合适的标签。 语义化的优点如下：
Vue 设置history模式下强制刷新页面报错404的问题
weixin_57095786的博客
04-23 3069
Vue 设置history模式下强制刷新页面报错404的问题
Vue项目History模式404问题解决方法
12-01
然而，当项目使用History模式部署到服务器，尤其是Nginx服务器上时，遇到刷新页面出现404错误的问题，因为服务器无法直接处理这些路由请求。下面我们将详细探讨这个问题的原因以及解决方案。 1. 问题分析： 在...
Vue路由history模式解决404问题的几种方法
12-10
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash...
vue下history模式刷新后404错误解决方法
01-19
本文介绍了vue下history模式刷新后404错误解决方法，分享给大家，具体如下： 官方说明文档： https://router.vuejs.org/zh/guide/essentials/history-mode.html 一、 实测 Linux 系统 Apache 配置： 更改站点配置...
vue2解决router使用history模式刷新报404问题
qq_40649432的博客
07-12 619
mode改成history后，页面首页访问正常，其他页面刷新报404错误 export default new Router({ mode : 'history', routes: [ { path: '/', name: 'index', component: index }, ] }) 解决：在网站根目录添加.htaccess文件 文件内容 <IfModule mod_rewrite.c> RewriteEngine On
Vue2：路由history模式的项目部署后页面刷新404问题处理
Brave_heart4pzj的博客
03-01 1441
Vue
history 模式刷新 404 问题解决方法
记录每日学习的知识&技术
01-16 3807
这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。
vue history路由模式404问题解决
weixin_49722066的博客
04-08 1172
vue使用history路由模式打包到线上，F5刷新会重定向到404。如果使用宝塔部署，添加这行代码可以解决。直接修改ngxin配置即可。
vue项目，页面刷新就404了
一个UI、前端爱好者。
08-12 4333
history模式：需要在服务器端配置，确保所有路由都重定向到index.html。hash模式：更简单，不需要服务器端配置，但 URL 中会有。根据你的项目需求和服务器环境选择合适的解决方案。
vue项目路由为 history 模式时， 线上环境刷新后空白页或404
qq_60990876的博客
09-22 5892
则是因为资源的基础路径出现了问题。需要修改vite.config.ts文件，将base改为 / 而不是 ./。如果有 .env.production 文件，是将该文件的VITE_BASE_URL更改 ，若改.env.development 文件或 .env 文件 则无效。nginx配置如下:重点在于 加上 try_files $uri $uri/ /index.html;本地没问题，部署到测试环境或线上后 刷新后空白页。前面莫名其妙加上了当前地址的第一级路由的地址。所以拿不到正确的资源。
java解决vue的history模式下刷新页面进入404
09-09
在使用Vue的history模式时，当页面进行刷新时，会出现404错误。这是因为Vue的history模式使用的是HTML5的history API，而不是传统的hash路由模式。在使用history模式时，服务器需要配置相应的规则来处理路由请求。 解决这个问题的方法是在后端服务器上进行相关配置。比如，使用Java开发的后端服务器可以通过Spring Boot框架来进行配置。 首先，需要配置WebConfig类，继承自WebMvcConfigurerAdapter，并重写其中的addResourceHandlers方法。在这个方法中，通过调用addResourceHandler和addResourceLocations可以配置服务器请求静态资源的路径和位置。 其次，需要在controller中添加一个fallback方法，用来处理前端页面路由请求的问题。在fallback方法中，通过前端请求的原始URL去寻找对应的HTML文件，并返回给前端。 最后，在后端服务器上，需要进行相关的跨域处理，以允许前端调用后端接口。 这样，通过Java进行相应的配置和处理，就可以解决Vue在history模式下刷新页面进入404的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值