Vue项目打包部署到Tomcat以及刷新404问题

Vue项目打包部署到Tomcat以及刷新404问题

vue项目使用命令进行打包

npm run build:prod

打包完成后生成dist文件夹，里面包含static文件夹（主要是css、js静态文件）和index.html

 

将dist里面的文件复制到tomcat下面的webapp文件夹里面的ROOT文件夹

启动tomcat，打开index.html文件，将访问路径改成“localhost:tomcat的端口号/index.html”

 

就可以打开项目

 

项目启动完成刷新出现404页面

在webapp里面的项目所在统计目录下，新建一个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>