Tomcat上部署vue项目（详细）包括安装，配置vue的history模式刷新404问题

在Tomcat上部署Vue项目，首先确保你已经构建了Vue项目，并且可以在本地正常运行。以下是部署步骤：

1. 构建Vue项目：

   在Vue项目根目录下运行构建命令：

   
   
   
   npm run build

   这将创建一个dist目录，里面包含了用于生产环境的文件。

2. 修改vue.config.js配置文件（如果你的项目中有这个文件），设置publicPath为Tomcat服务器上的路径：

   
   
   
   module.exports = {
     publicPath: '/your-context-path/'
   }

   如果没有vue.config.js文件，可以在项目根目录创建一个，并设置publicPath。

3. 把dist目录中的文件复制到Tomcat的webapps目录下的某个文件夹中，例如ROOT文件夹。

4. 如果Vue项目使用了history模式，需要配置Tomcat服务器支持URL重写。在Tomcat的conf目录下的web.xml文件中添加以下配置：

   
   
   
   <web-app ...>
       <filter>
           <filter-name>UrlRewriteFilter</filter-name>
           <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
       </filter>
       <filter-mapping>
           <filter-name>UrlRewriteFilter</filter-name>
           <url-pattern>/*</url-pattern>
           <dispatcher>REQUEST</dispatcher>
           <dispatcher>FORWARD</dispatcher>
       </filter-mapping>
       ...
   </web-app>

   同时，你需要在Vue项目的static或public文件夹中添加一个名为urlrewrite.xml的URL重写规则文件，内容如下：

   
   
   
   <rule>
       <from>^/your-context-path/.*</from>
       <to>/your-context-path/index.html</to>
   </rule>

   注意替换/your-context-path/为你的实际context path。

5. 重启Tomcat服务器。

如果在部署后刷新页面时遇到404错误，请检查Tomcat服务器上的URL重写规则是否配置正确，确保Vue项目中的路由模式是history，并且对应的URL重写规则已经生效。如果使用了第三方的URL重写工具或插件，请确保它们也被正确配置。