99 lines
3.1 KiB
Markdown
99 lines
3.1 KiB
Markdown
# 宝塔面板 Vue SPA 部署步骤
|
||
|
||
## 问题解决步骤
|
||
|
||
### 1. 修改 Nginx 配置
|
||
|
||
1. **登录宝塔面板**
|
||
2. **进入网站管理**
|
||
- 点击 "网站"
|
||
- 找到你的站点 `uzi1.cn` 或 `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://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 路由配置。
|