vue项目如何部署tomcat以及刷新404问题

最新推荐文章于 2025-06-12 10:26:27 发布

一只大魔王

最新推荐文章于 2025-06-12 10:26:27 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue tomcat

本文链接：https://blog.youkuaiyun.com/qq_40859018/article/details/89011509

本文介绍了如何将Vue项目部署到Tomcat服务器，并解决页面刷新出现404错误的问题。主要步骤包括修改config/index.js文件中的assetsPublicPath，设置路由模式为history并指定base，以及将打包后的dist文件放入Tomcat的webapps目录下。通过这些配置，可以正常访问项目，避免刷新页面时出现404错误。

1.更改config下的index.js文件里的assetsPublicPath
在这里插入图片描述

将‘.’改为‘./’
2.路由配置加上
mode:‘history’,
base: ‘/你的项目名/’,
在这里插入图片描述
3.将 npm run bulid 打包好的 dist文件放到 webapps 目录下
此时的访问路径为 http://ip:端口/dist
能访问成功，但可能刷新 404

4.在上传到tomcat 项目的根目录下  创建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>/index.html</location>
    </error-page>
  </web-app>

在刷新界面即可