history路由模式下，项目部署时404的解决方法

最新推荐文章于 2024-06-20 21:36:06 发布
最新推荐文章于 2024-06-20 21:36:06 发布
阅读量293 收藏
点赞数
分类专栏： 笔记 文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50680057/article/details/128878668
版权
在使用Express构建的服务器上部署采用history模式的Web应用时，可能会遇到404页面找不到的问题。为了解决这个问题，文章提到可以使用connect-history-api-fallback这个中间件，它能帮助处理单页应用（SPA）的路由重定向，确保在history模式下正确运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

当我们利用express搭建的服务器部署项目时，发现history模式下的网页部署后出现404，此时我们需要借助一个中间件‘connect-history-api-fallback’来解决
在这里插入图片描述

Vue设置路由为History模式，打包后访问404问题
baifucn的专栏
12-23 3627
一般情况下开发的单页应用的URL都会带有#号的hash模式，因为业务需求，或者不想使用带#号，我们通常在路由index.js里面设置： export default new Router({ mode: 'history', 这样URL不再会有#号，在Dev开发阶段一切都是正常的，可是在使用npm run build打包发布后页面显示一片空白和刷新项目路径出现404错误。 解决方法如下： 1、apache需要配置httpd.conf 打开文件在最后添加： ErrorDocument 404 /in
vue-cli history模式实现tomcat部署报404的解决方式
10-16
其中，`history`模式是Vue Router的一种路由模式，它可以让应用的路由表现得更像传统的Web应用，使得URL无需包含哈希(`#`)符号，从而提供更好的用户体验。然而，当使用`history`模式并将应用部署到Apache、Nginx或...
history模式部署后刷新报404
m0_61672533的博客
08-03 135
history模式下刷新报错，前端解决方案。
react及vue前端项目使用history路由 部署nginx 404踩坑问题
cdy_1的博客
07-08 1040
这么一看是不是觉得没啥问题了，但是但是问题来了，结果虽然是跳转我项目的index.html了，但还是没匹配到我的路由，比如我跳转home页，他给我跳转我项目自己的404页了，出现了下面这个玩意儿。但是由于我的比较特殊，我是部署多个项目的也就是说文件结构是下面这种，像刚才那种配置的话就会跳转到根目录的index.html了，显然不是我想要的。我的配置就是这样，然后就好了，所有针对部署多个项目的情况应该这么配置，注意这个名字要和nginx里的那个文件夹名字一样。一种是哈希路由，其原理就是通过哈希值跳转。
在 history 模式下，为什么刷新页面会出现404?
小草莓的博客
10-25 4703
同时需要注意在使用 History 模式时，需要保证所有路由的访问路径都指向 index.html，否则仍然会出现404错误。这些配置将确保在 Vue 应用程序中使用 history 模式时，服务器能够正确地处理所有路由请求，并返回正确的页面。这段代码会将所有请求都指向根目录下的 index.html 文件，让前端路由来处理 URL 请求。具体的配置方式取决于对应项目使用的服务器环境，常见的有 Apache、Nginx 等。以将所有请求都代理到 Vue 应用程序的入口文件。
Nginx服务器下VUE history模式子路由刷新404的问题
denga00的博客
04-05 477
Nginx服务器下VUE history模式子路由刷新404的问题环境、情况解决办法 环境、情况 我是使用宝塔面板生成的服务器，默认的Nginx。 由于遇到了这个在子路由刷新就404的问题，故此我就开始了漫长的百度中。网上的答案比较多，其实大部分都是对的，但是都没讲清楚是在哪修改Nginx配置文件，我一直以为是全局的Nginx配置文件，但其实并不是，是单个网页的Nginx配置文件。 废了我好多时间，可能这就是小白的痛吧！ 写下这篇文章帮助后来的小白跳坑。 解决办法 如图， 1、宝塔面板点击网站 2、点击你
Vue项目History模式404问题解决方法
12-01
然而，当项目使用History模式部署到服务器，尤其是Nginx服务器上时，遇到刷新页面出现404错误的问题，因为服务器无法直接处理这些路由请求。下面我们将详细探讨这个问题的原因以及解决方案。 1. 问题分析： 在...
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 ...
关于项目部署时history路由的问题
m0_64062932的博客
06-20 250
这里面一般会放部分页面react的render函数（webpack会进行分包），我们页面中的html就是通过这个文件来生成渲染的。，这个路径获取到的是Html，一些生成页面的js代码，依赖代码等等，我们就是要获取这个Html与他的script才能够生成页面。页面正常显示出来了，由于页面没有刷新，只是修改了网址并且获取了blog页面路由的Js代码，然后生成了Html。正常点击，路由也不会出错，但是，当我们点到相应的路由页面（现在一切正常），然后。服务器里面又没有对该路径的特殊处理，不可能获取到页面的呀。
vue history路由模式 部署Nginx
右边疯子_的博客
11-26 1231
1、设置 路由模式为 history 2、添加base （非常重要，否则首页加载白屏），路径是相对于域名映射的路径 3、修改Nginx配置 export default new Router({ mode: 'history', //设置mode base:'/web/bjsubway/', //设置base routes: [ { path: '/', redirect: '/map' }, { path: '/.
代码打包之后解决history模式刷新404和跨域问题
TZJ999919的博客
05-30 413
#### 修改配置文件。
vue-router路由history模式，hash模式，Nginx部署到非根目录
小蛇蛇的博客
06-19 539
【代码】vue-router路由history模式，hash模式，Nginx部署到非根目录。
history路由解决刷新出现404的问题
小白目的博客
07-11 7981
history 模式下刷新出现404解决
history模式部署到服务器无法访问页面，报404问题
qq_27004831的博客
11-25 322
本次修改针对vue2的项目配置 //修改vue.config.js里面 module.exports = { publicPath: process.env.NODE_ENV !== "production"?"/":"", } 服务器端修改 location / { # 修改转发请求头，让8080端口的应用可以受到真实的请求 pro...
前端项目部署到服务器出现的问题：前端项目用的history模式，刷新会404，该怎么解决呢？
weixin_43263566的博客
06-07 2643
前端项目部署到服务器出现的问题：前端项目用的history模式，刷新会404，该怎么解决呢？
vue项目history模式刷新404问题
FGGIT的博客
02-01 6943
vue项目history模式刷新404问题
Vue.js - 使用History模式反向代理Nginx配置404错误
chaishen10000的专栏
06-01 3045
History模式这样不灵了，需要注意两点：#防止刷新出现404错误2、要加"/"结尾配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。
Vue 设置history模式下强制刷新页面报错404的问题
weixin_57095786的博客
04-23 3056
Vue 设置history模式下强制刷新页面报错404的问题
06. vue history模式刷新后页面白屏、401、404的问题
qq_29517595的博客
06-21 7113
vue项目history模式刷新后页面空白的问题
nginx 部署 vue3 项目 History路由模式，要怎么配置nginx
最新发布
09-19
Nginx部署Vue3项目时，特别是在使用History路由模式下，你需要配置服务器来支持静态文件和处理动态请求到应用服务器。以下是基本的步骤： 1. **设置Nginx server block**: 创建一个名为`vueapp.conf`的虚拟主机...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值