更新生产环境配置，修改 API 基础地址为新的域名，并在 Vite 配置中添加手动分块设置以优化构建输出。

2025-08-27 18:56:12 +08:00
parent 1c08651831
commit 2a2ea19f0f
9 changed files with 460 additions and 2 deletions
--- a/宝塔面板操作步骤.md
+++ b/宝塔面板操作步骤.md
@@ -0,0 +1,98 @@
+# 宝塔面板 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 路由配置。