|
|
|
|
|
# 前端路由刷新404问题解决方案
|
|
|
|
|
|
|
|
|
|
|
|
## 问题描述
|
|
|
|
|
|
使用 Vue Router 的 `history` 模式时，当用户直接访问或刷新非根路径的页面时（如 `http://xiyan.cxmom.com/board/kanban`），服务器会返回 404 错误。
|
|
|
|
|
|
|
|
|
|
|
|
这是因为浏览器会向服务器请求该路径，但服务器上并没有这个实际的文件或目录。
|
|
|
|
|
|
|
|
|
|
|
|
## 解决方案
|
|
|
|
|
|
|
|
|
|
|
|
根据你使用的 Web 服务器，选择相应的配置：
|
|
|
|
|
|
|
|
|
|
|
|
### 1. Nginx 配置
|
|
|
|
|
|
|
|
|
|
|
|
将 `nginx.conf` 文件中的配置添加到你的 Nginx 配置中。
|
|
|
|
|
|
|
|
|
|
|
|
**关键配置**：
|
|
|
|
|
|
```nginx
|
|
|
|
|
|
location / {
|
|
|
|
|
|
try_files $uri $uri/ /index.html;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
这个配置的含义是：
|
|
|
|
|
|
- 首先尝试找到请求的文件（`$uri`）
|
|
|
|
|
|
- 如果不存在，尝试找到对应的目录（`$uri/`）
|
|
|
|
|
|
- 如果都不存在，返回 `index.html`，由 Vue Router 处理路由
|
|
|
|
|
|
|
|
|
|
|
|
**完整配置示例**见 `nginx.conf` 文件。
|
|
|
|
|
|
|
|
|
|
|
|
### 2. Apache 配置
|
|
|
|
|
|
|
|
|
|
|
|
将 `.htaccess` 文件复制到你的 `dist` 目录根目录下。
|
|
|
|
|
|
|
|
|
|
|
|
**关键配置**：
|
|
|
|
|
|
```apache
|
|
|
|
|
|
RewriteCond %{REQUEST_FILENAME} !-f
|
|
|
|
|
|
RewriteCond %{REQUEST_FILENAME} !-d
|
|
|
|
|
|
RewriteRule . /index.html [L]
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
确保 Apache 启用了 `mod_rewrite` 模块。
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 其他服务器
|
|
|
|
|
|
|
|
|
|
|
|
#### Node.js (Express)
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
const express = require('express');
|
|
|
|
|
|
const path = require('path');
|
|
|
|
|
|
const app = express();
|
|
|
|
|
|
|
|
|
|
|
|
app.use(express.static(path.join(__dirname, 'dist')));
|
|
|
|
|
|
|
|
|
|
|
|
// Vue Router history 模式 fallback
|
|
|
|
|
|
app.get('*', (req, res) => {
|
|
|
|
|
|
res.sendFile(path.join(__dirname, 'dist/index.html'));
|
|
|
|
|
|
});
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
#### Node.js (Koa)
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
const Koa = require('koa');
|
|
|
|
|
|
const serve = require('koa-static');
|
|
|
|
|
|
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
|
|
|
|
|
|
const app = new Koa();
|
|
|
|
|
|
|
|
|
|
|
|
app.use(historyApiFallback());
|
|
|
|
|
|
app.use(serve('dist'));
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
#### IIS (web.config)
|
|
|
|
|
|
创建 `web.config` 文件：
|
|
|
|
|
|
```xml
|
|
|
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
|
|
|
|
<configuration>
|
|
|
|
|
|
<system.webServer>
|
|
|
|
|
|
<rewrite>
|
|
|
|
|
|
<rules>
|
|
|
|
|
|
<rule name="Handle History Mode and hash fallback" stopProcessing="true">
|
|
|
|
|
|
<match url="(.*)" />
|
|
|
|
|
|
<conditions logicalGrouping="MatchAll">
|
|
|
|
|
|
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
|
|
|
|
|
|
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
|
|
|
|
|
|
</conditions>
|
|
|
|
|
|
<action type="Rewrite" url="/index.html" />
|
|
|
|
|
|
</rule>
|
|
|
|
|
|
</rules>
|
|
|
|
|
|
</rewrite>
|
|
|
|
|
|
</system.webServer>
|
|
|
|
|
|
</configuration>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 4. Spring Boot（如果前端文件集成在后端）
|
|
|
|
|
|
|
|
|
|
|
|
如果前端文件已经复制到 `src/main/resources/static/` 目录，后端已经配置了 `FrontendController` 和 `ResourcesConfig`，应该可以正常工作。
|
|
|
|
|
|
|
|
|
|
|
|
## 部署步骤
|
|
|
|
|
|
|
|
|
|
|
|
1. **构建前端项目**：
|
|
|
|
|
|
```bash
|
|
|
|
|
|
cd xiyan-ui
|
|
|
|
|
|
npm run build:prod
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
2. **根据你的服务器类型**：
|
|
|
|
|
|
- **Nginx**：将 `dist` 目录内容复制到服务器，并配置 `nginx.conf`
|
|
|
|
|
|
- **Apache**：将 `dist` 目录内容和 `.htaccess` 文件复制到服务器
|
|
|
|
|
|
- **其他服务器**：使用相应的配置
|
|
|
|
|
|
|
|
|
|
|
|
3. **重启服务器**使配置生效
|
|
|
|
|
|
|
|
|
|
|
|
## 验证
|
|
|
|
|
|
|
|
|
|
|
|
配置完成后，测试以下场景：
|
|
|
|
|
|
1. ✅ 直接访问 `http://xiyan.cxmom.com/` - 应该正常显示首页
|
|
|
|
|
|
2. ✅ 访问 `http://xiyan.cxmom.com/board/kanban` - 应该正常显示看板页面
|
|
|
|
|
|
3. ✅ 在 `http://xiyan.cxmom.com/board/kanban` 页面刷新浏览器 - **不应该**再出现 404
|
|
|
|
|
|
|
|
|
|
|
|
## 注意事项
|
|
|
|
|
|
|
|
|
|
|
|
1. 确保静态资源路径正确（`/static/**`）
|
|
|
|
|
|
2. 确保 API 代理配置正确（如果前端独立部署）
|
|
|
|
|
|
3. 配置后记得重启 Web 服务器
|
|
|
|
|
|
|
