
vue部署至Tomcat,F5刷新报404问题解决

我做的是一个移动端项目,使用的是 Vue + app 包壳
的方式。在 PC 端测试时发现 F5 刷新直接报 404 问题
,虽然在移动端包壳后不会有刷新的功能,但是强迫症搞怪,用着真是难受,必须给它搞定,所以就有了本篇文章。
Vue 部署至 Tomcat 会遇到的问题汇总:
1.在将vue项目部署至tomcat后,js、css、img、index.html等文件,都有被缓存的可能。
解决js、css、img 缓存问题:可以使用时间戳的方式 参考:Vue项目部署,解决js、css、img被缓存问题
2.解决index.html入口文件,可以使用Filter过滤器的方式解决
1中,解决的只是index.html 中引入的js、css、img 等文件的缓存。但是 index.html 这个文件也可能会缓存。网上很多说:解决index.html 都是Nginx。目前博主使用的是Tomcat。网上很难找到 Tomcat,使用 Filter 的方式是博主自己研究出来的方式,目前已线上运行1年,没法现任何问题。
参考:vue部署至tomcat,解决index.html被缓存的问题
第3个问题解决方案,就是本文要讲的,解决起来也很简单。
3.vue部署至Tomcat,F5刷新报404问题
解决方案:进入项目部署的路径下,创建一个 WEB-INF 文件夹,在文件夹中 创建一个 web.xml 文件,在 web.xml 中配置如下内容即可。
配置信息如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/</location>
</error-page>
</web-app>
注意:
我们每个人的 Tomcat 项目部署地址可能有所不同,一般是在apache-tomcat-版本号/webapps
目录下,我对 tomcat 目录进行了一些简单的配置,并写了一些启动脚本,所以我的项目部署的文件夹是在webapp/web
目录下,所以 新加的WEB-INF/web.xml
也是在webapp/web
目录下
博主写作不易,加个关注呗
求关注、求点赞,加个关注不迷路 ヾ(◍°∇°◍)ノ゙
我不能保证所写的内容都正确,但是可以保证不复制、不粘贴。保证每一句话、每一行代码都是亲手敲过的,错误也请指出,望轻喷 Thanks♪(・ω・)ノ




更多推荐
所有评论(0)