# Vue SPA 部署指南

## 问题描述

当直接访问 `http://2.uzi0.cc/play?code=973F2YTE` 时出现404错误，但其他页面正常。这是典型的单页应用(SPA)部署问题。

## 原因分析

1. **开发环境**：Vite开发服务器自动处理路由回退
2. **生产环境**：Web服务器尝试查找实际的 `/play` 文件，但这只是前端路由

## 解决方案

### 方案一：Nginx 配置（推荐）

1. 使用项目根目录的 `nginx.conf` 文件
2. 修改其中的 `root` 路径为实际部署路径
3. 重新加载 Nginx 配置：
```bash
sudo nginx -t  # 测试配置
sudo nginx -s reload  # 重新加载
```

### 方案二：Apache 配置

1. 将 `apache.htaccess` 文件复制到 `dist` 目录下，重命名为 `.htaccess`
2. 确保 Apache 启用了 `mod_rewrite` 模块

### 方案三：Netlify 部署

1. 将 `_redirects` 文件复制到 `dist` 目录下
2. 重新部署到 Netlify

### 方案四：其他静态托管服务

对于其他静态托管服务，需要配置：
- 所有路由都回退到 `index.html`
- API 请求代理到 `http://192.140.164.137:18080`

## 重新构建和部署

```bash
# 1. 重新构建项目
npm run build

# 2. 将构建文件部署到服务器
# 确保 dist 目录下的所有文件都已上传

# 3. 配置 Web 服务器（选择上述方案之一）

# 4. 测试访问
# http://2.uzi0.cc/play?code=973F2YTE 应该能正常访问
```

## 验证步骤

1. 直接访问：`http://2.uzi0.cc/play?code=973F2YTE`
2. 应该能看到游戏页面，而不是404错误
3. 刷新页面应该仍然正常
4. API 请求应该正常工作（无CORS错误）

## 常见问题

### Q: 仍然出现404错误
A: 检查Web服务器配置是否正确应用，确认配置文件路径和语法

### Q: API请求失败
A: 检查代理配置，确认后端服务 `http://192.140.164.137:18080` 可访问

### Q: 静态资源加载失败
A: 检查资源路径配置，确认 `base` 配置正确