VUE3项目部署到Tomcat

Vue 3 项目通常是一个构建后的单页应用，它可以被部署到任何静态资源服务器中。然而，如果你想要将其部署到像 Tomcat 这样的 Java 服务器，你需要做一些额外的步骤。

1. 构建你的 Vue 3 项目：

   在项目根目录下运行 npm run build 或 yarn build 来构建项目。构建完成后，会生成一个 dist 目录，里面包含了用于生产环境的文件。

2. 准备 index.html 文件：

   确保 dist 目录下的 index.html 文件有正确的 publicPath。如果你的应用是部署在服务器的根路径上，那么 publicPath 应该被设置为 './'。如果部署在子路径上，则应该设置为 '/your-sub-path/'。

3. 将 dist 目录内容复制到 Tomcat 的 webapps 目录下的某个文件夹中。

4. 配置 Tomcat：

   • 确保 Tomcat 的 web.xml 配置支持单页应用（SPA）的路由。通常需要一个 servlet-mapping 来捕获所有的路由请求，并将它们重定向到 index.html。
   • 如果你的 Vue 应用使用了 History 模式的路由，你可能需要配置 <Context> </Context> 标签内的 reloadable 属性为 true 在 conf/server.xml 中，以便于 Tomcat 可以正确处理单页应用的路由变化。

以下是一个简单的 web.xml 配置示例，用于支持 Vue 3 应用在 Tomcat 下的路由处理：

<web-app ...>
  <!-- 其他配置 -->
 
  <servlet>
    <servlet-name>app-servlet</servlet-name>
    <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>0</param-value>
    </init-param>
    <init-param>
      <param-name>listings</param-name>
      <param-value>false</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>app-servlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
 
  <!-- 其他配置 -->
</web-app>

5. 重启 Tomcat 服务器，并确保你的 Vue 应用可以通过 Tomcat 正确访问。

注意：如果你的 Vue 应用使用了 History 模式的路由，确保服务器配置可以正确处理路由变化并重定向到 index.html。如果你的应用部署在非根路径，确保 vue-router 的 base 选项设置正确。