vuejs项目怎么部署到tomcat

Vue.js 作为一款现代化的前端框架，通常是通过打包的方式部署到服务器上的。对于部署到 Tomcat 上来说，主要有两种方式：

## 方式一：打包为 WAR 包

将 Vue.js 项目打包成 WAR 包，然后将 WAR 包放到 Tomcat 的 webapps 目录下即可。

步骤如下：

### 1. 打包项目

npm run build 命令可以将 Vue.js 项目打包为静态资源，具体的打包配置可以在 vue.config.js 中配置。默认情况下，打包生成的资源会被放在 dist 目录下。

### 2. 新建 WEB-INF 目录并放置配置文件

在 dist 目录下新建 WEB-INF 文件夹，并在其中新建 web.xml 文件。web.xml 文件的内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" 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">
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

这里的 web.xml 文件用于 Tomcat 在加载 WAR 包时进行解析，然后读取其中的静态资源。

### 3. 将静态资源复制到 WEB-INF 目录下

将 dist 目录下的所有文件复制到 WEB-INF 目录下的 classes 目录下。这里需要注意的是，一定要复制所有文件，包括隐藏文件夹。可以使用 cp -r dist/. WEB-INF/classes/ 命令来实现。

### 4. 打包成 WAR 包

在 WEB-INF 的上一级（即 dist 目录）执行 jar -cvf myapp.war * 命令，这里的 myapp 可以自定义，表示 WAR 包的名称。

### 5. 将 WAR 包放到 Tomcat 的 webapps 目录下

将 WAR 包复制到 Tomcat 的 webapps 目录下即可，Tomcat 会自动解压 WAR 包并启动项目。

## 方式二：部署为静态资源

将 Vue.js 项目打包之后，将 dist 目录下的所有文件直接放到 Tomcat 的 webapps 目录下即可。这种方式需要在打包时指定 publicPath 选项为当前路径，即：

module.exports = {
  publicPath: './',
  // ...其他配置
}

这样打包生成的所有静态资源的路径都会基于当前路径，而不是基于域名或者服务器的根目录。当然，这种方式放置的静态文件不会被 Tomcat 进行任何处理，如需要进行 URL 路径的映射，需要在 Tomcat 中配置。但是，这种方式相比于 WAR 包的方式要更加简单和直接。