解决Tomcat部署Vue项目后，浏览器刷新报404问题

已于 2023-02-08 13:59:01 修改
阅读量1.6k 收藏 3
点赞数 1
分类专栏： 其他 Tomcat
于 2022-07-25 16:22:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dai_Haijiao/article/details/125977642
版权

前端 开发语言

1. 问题截图：

2. 解决办法

打开tomcat，找到web.xml文件，其路径类似于：apache-tomcat-8.5\conf\web.xml

添加如下配置：

<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>

之后如下：

Smile-1
关注
专栏目录
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
12-09
遇到的问题 使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错。 在网上查找了一下，原来是HTML5 History 模式引发的问题，具体为什么，vue官方已经给出了解释，你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了，官方给出的解决方案中没有说tomcat下，怎么决解。 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面
vue项目部署到tomcat服务器产生的404问题解决
qq_50121370的博客
01-13 2482
如果我们想用IDEA部署启动的话,需要设置Application context设置为/，其实直接访问服务器就是默认访问该项目了。我使用的是在IDEA创建web项目，将打包好的文件放置到项目之中，配置好tomcat服务器运行。之后出现如上的错误。查看网络，发现在请求资源的时候，并没有走项目路径，请求的url应该为。启动tomcat服务器，可以发现项目正常运行了。这里跳过了项目名称，直接进行申请。
解决Tomcat部署应用时遇到的HTTP状态404错误的详细指南
最新发布
科技改变人类，技术成就未来
07-10 2271
HTTP状态404错误在Tomcat部署中是常见但可以解决的问题。本文详细介绍了如何逐步排除常见问题，从服务器状态、应用部署、日志文件、配置文件到缓存清理和权限设置等多个方面进行排查。希望这些步骤能帮助你解决Tomcat中的HTTP状态404错误，提高应用的部署和运行效率。
VUE项目部署Tomcat页面刷新404问题解决方法
zhangjunfun的专栏
03-14 3697
VUE项目打包部署至tomcat后浏览器刷新页面出现404问题的解决方法
前端vue项目部署到tomcat，一刷新报错404解决方法
mjhfavourite的专栏
05-18 4038
VUE项目部署到Tomcat之后，刷新页面会出现404。此问题主要是使用了VUE router的History模式 一、解决方案 1-编辑server.xml，在Host的Context中增加以下内容，增加Valve部分内容 <Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true"> <Context path="/" docBase="front" reloadabl
Vue工程打包部署Tomcat，解决404、静态路径等问题
Young-weiai
04-20 3411
通常使用nginx部署会少很多麻烦，但是部署环境通常也不是开发程序员能够决定的。Vue部署Tomcat所遇到的静态文件问题、刷新问题通过以上配置修改，基本都能解决。解决不了的，欢迎留言讨论~
前端项目打包部署到tomcat后可以访问，刷新页面404问题
qq_44888952的博客
09-19 1812
2. 配置历史模式：如果你使用了Vue Router的history模式，确保在创建路由时使用`createWebHistory`函数，并传入正确的`BASE_URL`参数。3. 配置Tomcat：如果你使用的是Tomcat服务器，请确保已正确配置Tomcat的`context.xml`文件。确保在`Context`元素中设置了正确的`path`属性，以与你在Vue路由中定义的`BASE_URL`参数匹配。这将告诉Tomcat当遇到404错误时，将请求重定向到Vue应用的`index.html`页面。
在nginx上部署vue项目(history模式)的方法
08-28
总结来说，部署Vue项目并启用`history`模式需要在服务器端进行适当的配置，以确保所有路由请求都能正确地导向Vue应用的入口文件。无论是Apache还是Nginx，都需要将未找到的请求重定向至`index.html`，以便Vue应用的...
记一次vue去除#问题处理经过小结
12-10
然而，启用 history 模式后，遇到的问题是在服务器端，当用户直接输入 URL 或刷新页面时，服务器可能会返回 404 错误，因为服务器没有找到对应的静态资源。这是因为在 history 模式下，所有的路由都由前端处理，而...
community_frontend：springboot + vue多用户社区项目前端
02-22
项目完成后，前端资源通常部署在CDN或静态服务器上，而SpringBoot应用则部署在支持Java的Web服务器如Tomcat、Jetty等。为了保证质量和用户体验，项目应进行单元测试、集成测试以及性能测试。 总结，"community_...
VUE项目打包后使用Tomcat部署 解决页面刷新后404问题
WindNolose的博客
05-17 6992
1.打包VUE项目 命令：npm run build npm run build 打包完成后，项目中会多出来一个dist文件夹，里面就是打包后的文件 2.部署Tomcat 此处采用docker compose的方式部署Tomcat 任意创建一个目录，在目录下编辑docker-compose.yml文件 挂载容器中的/usr/local/tomcat/webapps目录 version: "3" services: tomcat: image: tomcat:8.5 containe
vue部署至Tomcat，F5刷新报404问题解决
扛麻袋的少年的博客
11-09 2556
  我做的是一个移动端项目，使用的是 Vue + app 包壳的方式。在 PC 端测试时发现 F5 刷新直接报 404 问题，虽然在移动端包壳后不会有刷新的功能，但是强迫症搞怪，用着真是难受，必须给它搞定，所以就有了本篇文章。 Vue 部署至 Tomcat 会遇到的问题汇总： 1.在将vue项目部署至tomcat后，js、css、img、index.html等文件，都有被缓存的可能。    解决js、css、img 缓存问题：可以使用时间戳的方式  参考：Vue项目部署，解决js、css、img被缓存问题
springboot+vue部署后出现springboot后端部分页面404
qq_61887118的博客
09-16 2056
springboot vue前后端分离项目中request请求路径失败，代理设置解决
解决Vue前端项目打包部署到tomcat后浏览器F5刷新页面404问题
Let_me_tell_you的博客
06-22 2558
因为tomcat本身不支持这个模式，所以如果你的项目和我的项目一样，不需要考虑SEO什么的，可以简单处理一下，直接在创建 Vue Router 实例的时候指定使用 hash mode，这样就不用去修改tomcat的配置来支持 history mode了。使用hash mode时，浏览器的URL中的hash发生变化时，浏览器不会重新加载页面，而是通过监听 hash 变化事件来实现页面更新。Tomca服务器本身不支持Vue中的 HTML5 History Mode，而之前的配置，正是。
tomcat运行vue项目，刷新后报404
sinat_34626741的博客
07-13 1361
背景：打包后的项目发给后台部署到tomcat/webapps/dist中，刷新页面报404 解析：一般项目放tomcat/webapps/ROOT/,因为里面有默认的WEB-INF,若放外面，需修改conf/server.xml中的配置才会打开页面； vue是单页面应用，当router使用history模式，URL是和正常的url差不多的，但vue-router设置的路径是虚拟路径，当后台没有配置支持时，刷新会返回404错误。 解决办法：tomcat的dist牡蛎添加WEB-INF文件夹，并添加文件w
Vue打包发布用tomcat运行起来后无法访问，出现空白页问题的解决方案
互联网的修罗场
02-22 6021
现象 使用npm run build发布打包vue前端项目http://localhost:8080/xxx （webapps下的发布的文件夹名）出现空白页，使用F12查看如下图： 原因 由于webpack打包引入css js等文件路径为绝对路径，因此导致tomcat等web server相对路径访问不到而出现空白页和ERR_ABORTED错误。 解决 1.在build/webpac...
Linux--Tomcat部署web服务接口访问报404
stalin_的博客
02-01 6168
前两天在往服务器上的Tomcat部署Web项目上栽了跟头，Tomcat首页可以正常启动，但是web项目里的所有接口访问都报404，折腾了好久才解决，记录一下分享给大家。
tomcat部署vue项目Vue Router路径刷新404
05-30
在部署Vue项目到Tomcat上时，如果使用了Vue Router的history模式（即将路由模式设置为history），在页面刷新时会出现404错误，这是因为Tomcat默认使用的是基于Servlet规范的URL匹配模式，而不支持HTML5的history API。为了解决这个问题，需要进行如下配置： 1. 在Vue Router的index.js文件中，将mode设置为"hash"模式，即： ```javascript const router = new VueRouter({ mode: 'hash', // ... }) ``` 2. 在Tomcat的web.xml文件中，添加一个错误页面的配置，即： ```xml <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> ``` 这样配置之后，当Tomcat服务器返回404错误时，会自动跳转到Vue项目的首页。同时，由于使用了hash模式，URL中会带有#符号，但不会影响到页面的正常访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值