Vue项目，uni-app打包为history模式h5页面并使用tomcat部署，解决刷新404问题

九分库

于 2022-09-05 10:53:01 发布

阅读量1.7k

点赞数 4

分类专栏：功能文章标签： tomcat uni-app java

本文链接：https://blog.csdn.net/qq_52912134/article/details/126700246

版权

功能专栏收录该内容

48 篇文章

订阅专栏

本文档详细介绍了如何安装Tomcat，并提供了HBuilderX打包H5应用后如何部署到Tomcat的步骤。关键步骤包括将打包后的文件放入Tomcat的webapps目录下的ROOT文件夹，修改server.xml配置文件以改变默认端口，以及解决404错误的方法，即创建WEB-INF及web.xml文件来重定向404请求到index.html。

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

安装tomcat

tomcat安装教程1
tomcat安装教程2

hbuliderx 打包成h5

在这里插入图片描述

部署tomcat

把打包dist目录下放在 ROOT （在webapps 文件下）目录下就好
Tomcat 会默认访问 ROOT下的文件
tomcat 默认端口是80 可以去conf目录下的server.xml更改

刷新404问题

在tocmat的webapps下的项目中创建WEB-INF文件夹，在文件夹中创建文件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>/index.html</location>
  </error-page>
</web-app>

重启解决