前端vue项目部署到tomcat,一刷新报错404解决方法
公司前端写的后台部署到tomcatwebapps目录下后,无法进行刷新,一刷新就会报错404,自动跳的404页面。在网上查了下,官方说是HTML5 History模式引发的问题,但是解决方案中,并没有tomcat的解决方案。如链接:https://router.vuejs.org/zh-cn/essentials/history-mode.html废话不多说直接进入主题我使用的是Vue4.X当运行
·
公司前端写的后台部署到tomcat
webapps目录下后,无法进行刷新,一刷新就会报错404,自动跳的404页面。在网上查了下,官方说是HTML5 History
模式引发的问题,但是解决方案中,并没有tomcat的解决方案。如链接:https://router.vuejs.org/zh-cn/essentials/history-mode.html
废话不多说直接进入主题
- 我使用的是Vue4.X
当运行命令npm run build
后 会产生一下如图所示的文件
然后直接将图片一中的dist
文件夹进行压缩打包上传到服务器中的webapps 目录下
如右图所示
此时项目已经部署完成可以通过浏览器进行访问了,但是你会发现子路由以刷新就会包404
的错误
**
解决方案来了
在 dist
文件夹中创建一个 WEB-INF
的文件夹 并在该文件夹中创建一个web.xml
如图所示:
web.xml 内容
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
id="scplatform" version="2.5">
<display-name>/</display-name><!--/webName/-->
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
OK 这样就完美的解决了刷新404的问题了
如有不懂欢迎私信
更多推荐
已为社区贡献1条内容
所有评论(0)