# 宝塔面板 Vue SPA 部署步骤

## 问题解决步骤

### 1. 修改 Nginx 配置

1. **登录宝塔面板**
2. **进入网站管理**
   - 点击 "网站" 
   - 找到你的站点 `2.uzi0.cc` 或 `192.140.164.137`
   - 点击 "设置"

3. **修改配置文件**
   - 点击 "配置文件" 选项卡
   - 在现有配置中添加以下两个关键部分：

#### 添加 API 代理配置（在 #REWRITE-END 后面添加）：
```nginx
# ========== 新增：API代理配置 - 解决跨域问题 ==========
location /api/ {
    proxy_pass http://192.140.164.137:18080/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # CORS头部设置
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
    
    # 处理OPTIONS预检请求
    if ($request_method = 'OPTIONS') {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
        add_header Access-Control-Max-Age 1728000;
        add_header Content-Type 'text/plain; charset=utf-8';
        add_header Content-Length 0;
        return 204;
    }
}

# ========== 新增：Vue SPA 路由配置 - 关键部分！ ==========
location / {
    try_files $uri $uri/ @fallback;
}

# SPA回退配置
location @fallback {
    rewrite ^.*$ /index.html last;
}
```

### 2. 保存并重载配置

1. **保存配置**
   - 点击 "保存" 按钮
   
2. **重载 Nginx**
   - 宝塔面板会自动重载配置
   - 或者手动点击 "重载配置"

### 3. 验证部署

访问以下链接测试：
- ✅ `http://2.uzi0.cc/` （首页）
- ✅ `http://2.uzi0.cc/play?code=973F2YTE` （游戏页面，之前404的）
- ✅ 刷新游戏页面应该正常
- ✅ API请求应该不会有CORS错误

## 配置说明

### API 代理的作用：
- 将前端的 `/api/*` 请求代理到后端服务器 `http://192.140.164.137:18080`
- 解决跨域(CORS)问题
- 处理预检请求(OPTIONS)

### SPA 路由配置的作用：
- `try_files $uri $uri/ @fallback;` 首先尝试找实际文件
- 如果文件不存在，回退到 `@fallback`
- `@fallback` 将所有请求重写到 `index.html`
- 让 Vue Router 处理前端路由

## 常见问题

### Q: 修改后仍然404
**A:** 检查配置语法，确保没有语法错误，查看错误日志

### Q: API请求失败
**A:** 检查后端服务 `http://192.140.164.137:18080` 是否正常运行

### Q: 静态资源加载失败  
**A:** 检查文件路径，确保 `dist` 目录下的文件都已上传

## 完整的修改位置

在你的配置文件中，在 `#REWRITE-END` 这一行后面，`#禁止访问的文件或目录` 这一行前面，插入上述的 API 代理和 SPA 路由配置。