我做的是一个移动端项目,使用的是 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♪(・ω・)ノ

GitHub 加速计划 / vu / vue
86
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 4 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐