vue history模式，刷新页面报404 解决方案

最新推荐文章于 2024-08-23 16:53:53 发布
最新推荐文章于 2024-08-23 16:53:53 发布
阅读量600 收藏 1
点赞数 3
分类专栏： js vue 文章标签： vue history
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/raphero/article/details/116064936
版权

Webpack 配置 publicPath history-api-fallback 前端开发
关键词由CSDN通过智能技术生成
vue 同时被 2 个专栏收录
5 篇文章 1 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏

1.修改webpack.dev.conf.js

publicPath 设置成 /

2.webpack.base.conf.js

publicPath 设置成 /

3.package.json

scripts -> dev 添加参数--history-api-fallback

带头大哥
关注
专栏目录
vue history模式刷新页面进入404解决方案
郝峰vip的博客
12-02 9599
vue 路由模式 history模式 刷新页面进入404解决方案
vue路由history模式刷新404问题解决方案
caihuawei123的博客
08-19 395
1.使用nginx的方法 server { listen 8168; server_name localhost; location / { root /opt/apache-tomcat-8.5.8/XXX/webapps/ROOT; index index.html; try_files $uri $uri/ @router; index
解决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模式后Nginx代理报404
古辛博格
12-18 451
由于以前VUE采用hash模式: hash—— 即地址栏 URL 中的#符号（此 hash 不是密码学里的散列运算） 比如：http://abc.example.com/abc/#/hello，hash 的值为#/hello 现采用history模式: history—— 利用了 HTML5 History Interface 中新增的pushState()和replaceState()方法。（需要特定浏览器支持） 比如：http://abc.example.com/a...
vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题
最新发布
半只
08-23 705
默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上例如。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在，则设置 base需要配置 为/demo/这个问题只有 路由模式为才会出现，如果使用的是这样的路由则不会出现。
VUE的history模式下刷新报404错误
qq_40026636的博客
03-15 671
VUE的history模式下刷新报404错误 nginx 设置404页面重定向到index.html页面 tomcat 在tomcat的conf目录下的web.xml中添加404页面重定向到index.html
Nginx与history路由模式：刷新页面404问题
席木木的博客
02-08 5218
Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决
vue3.2项目中使用history路由模式刷新后页面404
猫玖云
04-06 2754
vue3项目中使用history路由模式刷新后页面404
Vue项目History模式404问题解决方法
12-01
然而，当项目使用History模式部署到服务器，尤其是Nginx服务器上时，遇到刷新页面出现404错误的问题，因为服务器无法直接处理这些路由请求。下面我们将详细探讨这个问题的原因以及解决方案。 1. 问题分析： 在...
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
12-09
在Vue项目中，当使用Webpack进行打包并将应用部署到Tomcat服务器时，可能会遇到一个常见的问题：用户在页面刷新后收到404错误。这个问题的根本原因在于Vue Router的`history`模式。Vue Router的`history`模式利用了...
Vue路由history模式刷新404的解决方法
balloonhunter的博客
06-17 1203
前言 在history模式下，开发环境中各页面的访问都正常。但是在生产环境只能访问首页（刷新404），其他页面的访问和刷新全都是404。而在hash模式下开发环境和生产环境路由跳转均无问题。 后端配置： 1.Nginx location / { try_files $uri $uri/ /index.html; #检测文件存在性,重定向到首页目录,防止404。 } 2.Koa 使用中间件 //解决vue-router的history模式下，页面刷新后not found的问题 const histo
vue2.0 路由模式mode="history"的作用
10-17
主要介绍了vue2.0 路由模式mode="history"的作用，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
本地vite项目路由使用createWebHistory刷新出现404
follow12138的博客
04-17 1128
/设置绝对路径，配合vite.configz中的base找到对应页面资源。
history 模式刷新 404 问题解决方法
记录每日学习的知识&技术
01-16 3278
这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。
vue 下 'history'刷新404
qq_42074281的博客
03-16 206
解决方法 找到src/router/index.js 文件添加代码 export default new Router({ mode: 'history', //修改部分 base: '/dist', //修改部分 如果你的次级文件夹名是dist 这里就配置dist routes: [ { path: '/', name: 'HelloWorld',...
vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)
qq_52686989的博客
07-02 1425
上面这种配置在前端路由和后端接口前缀一致时，也会产生404问题（页面展示 not get/post），因为当你获取某个页面路由时比如/setting，由于Nginx里面配置了代理服务 location /setting， 这会代理到到接口请求，当然就不能获取页面资源了。后端里面：每个路由模块都加一个统一的前缀，比如 ‘/api’；前端里面。
Vue3.x刷新当前路由页面资源获取不到
qq_53063377的博客
10-12 298
后来得知这是vue3.x的路由配置中createwebhistory的问题，只需要将router的history的模式该为createwebharshhistory就可以了。控制台显示获取不到当前页面的资源，这个时候再次重新启动原始的8080，程序的页面又可以重新显示了，但之前的问题依然没有解决，代码都没有报错。配置好路由之后在使用的时候跳转是没有问题可以使用的，但是当当前页面的内容更改了，页面热加载就会报错，刷新当前页面也会报错。初次刷新，和第二次刷新同一页面。
解决nginx配置vue.router项目在createWebHistory模式下访问404问题
对唔嗨住的博客
11-05 3139
问题描述 项目中我vue.router配置路由模式为web模式，也就是createWebHistory创建的，访问的时候浏览路径不用带上 # 在本地开发的时候访问路径如：添加链接描述 是可以正确打开的。 但是打包项目放到服务器的时候却只能访问根路径，如：http://xxx.xxx.com/，如果想访问http://xxx.xxx.com/login页面会报提示找不到页面，只能通过路由去解决，一开始我以为是vue.router的问题，找了半天发现是nginx的配置不正确。 解决方法 在nginx配.
Vue3 使用createWebHistory 页面刷新变成白页，报错 404， 解决方法
潮汐未见潮落的博客
09-22 7523
Vue3 使用createWebHistory 页面刷新变成白页，报错 404， 解决方法
vuerouter 使用history 刷新页面404
09-01
当使用 Vue Router 的 history 模式（mode: 'history'）时，在刷新页面时可能会遇到404错误。这是因为 history 模式使用 HTML5 的 history.pushState API 来管理路由状态，但这个 API 并不会发送请求到服务器。因此，当我们直接刷新页面时，服务器并没有对应的路由配置，所以会返回404错误。 要解决这个问题，有以下几种方法： 1. 在服务器上设置 URL 重定向：当服务器接收到404错误时，设置一个重定向规则，将路由重定向到主页面。这样刷新页面时就可以正确加载Vue应用。 2. 使用Hash模式：可以将 Vue Router 的模式设置为 hash 模式（mode: 'hash'）。这种模式下，URL 中会加入一个 # 符号，其后面的内容不会被发送到服务器，因此刷新页面时也不会出现404错误。但是这种模式下的 URL 看起来不够美观。 3. 使用后端路由处理：如果有后端服务器，可以在后端服务器上设置路由规则，让所有请求都返回 Vue 应用的主页面。这样刷新页面时就可以正确加载应用。这需要在服务器端进行一些配置。 总结来说，vuerouter 使用history 刷新页面404问题可以通过服务器重定向、使用 hash 模式或使用后端路由处理等方法来解决。选择哪种解决方案取决于具体的项目需求和服务器配置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

带头大哥

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

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

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

打赏作者

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

抵扣说明：

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

余额充值