1、将前端打包后的文件 内容拷贝到Tomcat的webapps下,可以直接丢入一个文件夹,访问时链接需要文件夹名称。为了链接的简洁可以直接放在ROOT下。
2、此时可能遇到的问题
一、启动后访问不到,页面F12显示如下图,那么就需要检查一下配置的访问路径是否对的。当前我是把dist文件夹放在webapp下。需要在前端代码配置一下访问路径加上dist
a、首先打包之前需要修改config文件夹下的index.js如果在webapps下创建dist文件夹作为项目包,则需要配置config/index.js文件,设置assetsPublicPath: '/dists/'这里改为这个配置之后,最后编译产生的index.html中相关路径也会带上‘/hms’,不会报404的错误了,具体的配置信息具体配置。
b、其次记得要添加404路由页面
二、vue项目路由在history模式下布置在Tomcat刷新会出现404问题,解决方案(需要根据前端的实际情况进行配置)
a、在tomcat的webapps下的前端文件夹下新建WEB-INF文件夹,并在该文件夹下建立web.xml文件,具体内容如下
b、web.xml文件内容
<?xml version="1.0" encoding="UTF-8"?>
<web-app metadata-complete="true" version="3.1" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>