Vue路由history模式刷新404的解决方法

最新推荐文章于 2024-07-02 20:37:40 发布

Radical 49

最新推荐文章于 2024-07-02 20:37:40 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/balloonhunter/article/details/106803635

版权

本文介绍了在Vue应用中使用history模式时，生产环境中遇到的刷新404问题及解决方案，包括针对Nginx、Koa、Express和Apache的后端配置调整。

摘要由CSDN通过智能技术生成

前言

在history模式下，开发环境中各页面的访问都正常。但是在生产环境只能访问首页（刷新404），其他页面的访问和刷新全都是404。而在hash模式下开发环境和生产环境路由跳转均无问题。

后端配置：

1.Nginx

location / {
   
  try_files $uri $uri/ /index.html;
  #检测文件存在性,重定向到首页目录,防止404。
}

2.Koa

使用中间件

//解决vue-router的history模式下，页面刷新后not found的问题
const history = require

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Radical 49

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue路由history模式刷新404问题解决方案

Alex__King的博客

06-19

2285

由于vue单页面的原因，需要借助路由来实现页面的切换，主要有两个方法，history, 和 hash。hash的话在URL上带有 ’#’ 的地址，处理起来比较坑，还有就是路由比较丑，最坑的是，做微信和支付宝的时候回调地址，不允许加？好，只能用rest 风格。但是换成history模式，就会有个新的坑，就是当用户刷新页面就无法显示了（404）。对于这个问题，我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。在网上搜了，一吨教程，都是无效的，我真的是醉.

在 history 模式下，为什么刷新页面会出现404?

小草莓的博客

10-25

4037

同时需要注意在使用 History 模式时，需要保证所有路由的访问路径都指向 index.html，否则仍然会出现404错误。这些配置将确保在 Vue 应用程序中使用 history 模式时，服务器能够正确地处理所有路由请求，并返回正确的页面。这段代码会将所有请求都指向根目录下的 index.html 文件，让前端路由来处理 URL 请求。具体的配置方式取决于对应项目使用的服务器环境，常见的有 Apache、Nginx 等。以将所有请求都代理到 Vue 应用程序的入口文件。

参与评论您还未登录，请先登录后发表或查看评论

解决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 错误页面

vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)

最新发布

qq_52686989的博客

07-02

1015

上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting，这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。

history 模式刷新 404 问题解决方法

记录每日学习的知识&技术

01-16

3071

这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。

vue项目history模式刷新404问题

FGGIT的博客

02-01

6753

vue项目history模式刷新404问题

Vue路由history模式解决404问题的几种方法

12-10

但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history...

Vue项目History模式404问题解决方法

12-01

然而，当项目使用History模式部署到服务器，尤其是Nginx服务器上时，遇到刷新页面出现404错误的问题，因为服务器无法直接处理这些路由请求。下面我们将详细探讨这个问题的原因以及解决方案。 1. 问题分析：在...

vue下history模式刷新后404错误解决方法

10-18

主要介绍了vue下history模式刷新后404错误解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue 路由history模式刷新页面404问题

lucky_zouzou的博客

10-09

4533

vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器，而history模式下浏览器会直接去服务器找这些地址，导致服务器没有对应的页面地址而报404。增加location配置，与项目中配置的名称一致，try_files 后面的文件名也要与名称一致。前端项目中修改项目的base路径,这里我设置为main。第二步，修改nginx配置。

vue history模式刷新404原因

weixin_46293668的博客

05-07

8040

vue history模式刷新404

qq_34182649的博客

08-21

436

vue hash模式下，URL中存在’#’，用’history’模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。这是在网上查到的，但是我不是用nginx的不知道怎么解决先用回hash模式在这里记录一下以后找到解决办法更新 ...

VUE 改成history 模式刷新404 的问题

weixin_40451409的博客

07-18

Vue history 路由模式页面刷新404

liwan09的博客

05-07

1478

针对 vue history路由模式下，页面刷新404问题，针对不同的发布服务器及环境，官方文档的相关解决方案如下，链接地址：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90 HTML5 History 模式 vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 .

Vue 设置history模式下强制刷新页面报错404的问题

weixin_57095786的博客

04-23

2891

Vue 设置history模式下强制刷新页面报错404的问题

vue路由history模式刷新页面时页面丢失

06-09

当使用 Vue 路由的 history 模式时，刷新页面会导致页面丢失的原因是因为在 history 模式下，Vue 路由是使用 HTML5 History API 来实现的，而刷新页面会向服务器发送请求，在服务器端找不到对应的路由，就会返回 404 错误页面。为了解决这个问题，需要在服务器端配置一个 fallback 页面，即当服务器找不到对应路由时，返回的是一个固定的页面，而不是 404 错误页面。具体的配置方法因服务器而异，如果你使用的是 Nginx 服务器，可以在 Nginx 配置文件中添加如下配置： ``` location / { try_files $uri $uri/ /index.html; } ``` 这样，当服务器找不到对应的路由时，就会返回 index.html 页面，从而解决页面丢失的问题。