login_task_web/宝塔面板操作步骤.md

宝塔面板 Vue SPA 部署步骤

问题解决步骤

1. 修改 Nginx 配置

1. 登录宝塔面板

2. 进入网站管理

   • 点击 "网站"
   • 找到你的站点 uzi1.cn 或 192.140.164.137
   • 点击 "设置"

3. 修改配置文件

   • 点击 "配置文件" 选项卡
   • 在现有配置中添加以下两个关键部分：

添加 API 代理配置（在 #REWRITE-END 后面添加）：

# ========== 新增：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://uzi1.cn/ （首页）
• ✅ http://uzi1.cn/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 路由配置。