前端项目构建完毕打包成 war

前言

公司新项目采用前后分离，前端 Vue，后端 SpringBoot，部署平台只接受 war 包，需求就是把前端 build 之后的资源打成 war 包

步骤

搭建一个普通的 Java web 工程

目录结构

将前端项目构建之后的所有文件放到 web 根目录下

web/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_4_0.xsd"
         version="4.0">
    <display-name>Archetype Created Web Application</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.ico</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.jpg</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.gif</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.woff</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.ttf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.png</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
    <error-page>
        <error-code>404</error-code>
        <location>/</location>
    </error-page>
</web-app>

这里的配置含义如下：

• 设置 welcome-file 为 index.html
• 将静态资源（字体，图片，css，js）使用 tomcat 默认的 servlet 去处理
• 让 404 重定向到 /

这样一来所有的路由都会走到 index.html，这样就可以加载前端 js 控制的路由体系，这个项目使用的是 vue-router

打包 war（以 IDEA 为例）

• 在 Project setting -> Artifacts -> 添加 -> Web Application: Exploded
• Build -> Build Artifacts
• 在输出目录找到 war 包

需要注意的点

由于这个项目使用的是 vue-cli3.0
war 包的名称
vue.config.js -> publichPath
vue-router 的 base
需要保持一致！！！