Vue部署到tomcat

最新推荐文章于 2024-06-03 15:47:47 发布

李木有大本事

最新推荐文章于 2024-06-03 15:47:47 发布

阅读量467

点赞数

文章标签： vue tomcat

本文链接：https://blog.youkuaiyun.com/heheda123321123/article/details/108790126

版权

本文介绍了如何将Vue项目部署到Tomcat服务器。在使用history模式的Vue应用中，需要修改打包配置，将publicPath设为相应路径。接着，在Tomcat的webapps目录下创建对应目录并放入打包后的dist文件。为了处理页面刷新导致的404错误，需创建WEB-INF文件夹和web.xml文件，设置重定向规则。若根路径为/aaa/bbb，则需相应调整目录结构和web.xml配置。

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

Vue部署到tomcat

前置条件：history模式
根路径：/xxx

解决：

1.修改打包配置文件，通常在config/index.js，将assetsPublicPath: '/'改为assetsPublicPath: '/xxx/'

2.进入tomcat/webapps目录创建文件夹xxx，将打包好的dist文件夹中的所有文件复制到xxx。此时访问即可正常访问，但是页面刷新时会报404，继续下面操作

3.在该文件夹下创建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>