# Tomcat 部署配置说明 ## 问题原因 Vue Router 使用 history 模式,刷新页面时 Tomcat 会尝试查找对应的物理路径,导致 404 错误。 ## 解决方案 ### 方案一:配置 Tomcat rewrite 规则(推荐) 1. **下载 rewrite.jar** - 下载 Tomcat rewrite 模块:https://tomcat.apache.org/download-90.cgi - 将 `rewrite.jar` 放到 `$CATALINA_HOME/lib` 目录 2. **创建 WEB-INF/rewrite.config** 在 `wdk/WEB-INF/` 目录下创建 `rewrite.config` 文件,内容如下: ``` # 所有非文件请求都转发到 index.html RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^.*$ /wdk/index.html [L] ``` 3. **修改 WEB-INF/web.xml** 在 `wdk/WEB-INF/web.xml` 中添加 rewrite 过滤器: ```xml Yun3v2 Application rewriteFilter org.apache.rewrite.RewriteFilter rewriteFilter /* index.html ``` ### 方案二:使用 hash 模式(简单但 URL 不美观) 修改 `src/router/index.js`: ```javascript 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 Yun3v2 Application 404 /index.html index.html ``` ## 部署步骤 1. **重新构建项目** ```bash npm run build ``` 2. **复制文件到 Tomcat** ``` dist/ → tomcat/webapps/wdk/ ``` 3. **创建 WEB-INF 目录和配置文件** ``` tomcat/webapps/wdk/WEB-INF/ ├── web.xml └── rewrite.config (如果使用方案一) ``` 4. **重启 Tomcat** ## 推荐方案 - **生产环境**:使用方案一(rewrite 规则) - **快速测试**:使用方案三(error-page) - **内网简单部署**:使用方案二(hash 模式)