3.3 KiB

Raw Blame History

Tomcat 部署配置说明

问题原因

Vue Router 使用 history 模式，刷新页面时 Tomcat 会尝试查找对应的物理路径，导致 404 错误。

解决方案

方案一：配置 Tomcat rewrite 规则（推荐）

下载 rewrite.jar
- 下载 Tomcat rewrite 模块：https://tomcat.apache.org/download-90.cgi
- 将 rewrite.jar 放到 $CATALINA_HOME/lib 目录

创建 WEB-INF/rewrite.config 在 wdk/WEB-INF/ 目录下创建 rewrite.config 文件，内容如下：

# 所有非文件请求都转发到 index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ /wdk/index.html [L]

修改 WEB-INF/web.xml 在 wdk/WEB-INF/web.xml 中添加 rewrite 过滤器：

<?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>Yun3v2 Application</display-name>

    <!-- Rewrite Filter -->
    <filter>
        <filter-name>rewriteFilter</filter-name>
        <filter-class>org.apache.rewrite.RewriteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>rewriteFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- Welcome File -->
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

方案二：使用 hash 模式（简单但 URL 不美观）

修改 src/router/index.js：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),  // 使用 hash 模式
  routes
})

这样 URL 会变成：http://localhost:8080/wdk/#/home

方案三：配置 Tomcat 全局 error-page

在 wdk/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>Yun3v2 Application</display-name>
    
    <!-- 404 错误页面重定向到 index.html -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
    
    <!-- Welcome File -->
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

部署步骤

重新构建项目
```
npm run build
```
复制文件到 Tomcat
```
dist/ → tomcat/webapps/wdk/
```

创建 WEB-INF 目录和配置文件

tomcat/webapps/wdk/WEB-INF/
├── web.xml
└── rewrite.config (如果使用方案一)

重启 Tomcat

3.3 KiB Raw Blame History Unescape Escape