通常vue项目是打包后直接放在nginx容器下，但有时会由于某些原因，需要将前端项目布署到其他容器下，比如weblogic等，这时我们就需要将项目打包成war包，具体操作方法如下：

1. 环境准备

1.1 前端环境准备

前端项目在本地运行于 node 环境下，需要安装 node.js 开发环境，以及对应开发工具等。

1.2 后端环境准备

这里我们使用的是 java 命令打 war 包，所以还需要安装 java 开发环境：安装 JDK 并配置好环境变量。

2. 安装依赖

下载代码到本地后执行 npm install 安装相应依赖。

npm install

3. 构建项目

执行 npm run build 构建项目，会在项目根目录生成 dist 目录，构建后的文件都在此目录下。

npm run build

4. 创建 web.xml

在上述操作中生成的 dist 目录下新建 WEB-INF 目录，然后在 WEB-INF 目录下新建 web.xml，并在web.xml 文件中写入如下内容：

<web-app>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

5. 打 war 包

进入 dist 目录，执行如下命令打war包，由于打 war 包需要用到 jar 命令，需要事先安装好 jdk 并配置 java 环境变量。

cd ./dist
jar -cvf dist.war *

dist 为文件名，可自行修改，打包完成后会在 dist 目录下生成对应的 war 包文件。

6. 其他打包方式

也可以使用其他方式打包，比如 webpack 的插件库中提供了一个叫 webpack-war-plugin 的插件，可以很便捷的做到这一点。

npm install -D webpack-war-plugin