72 lines
1.9 KiB
Markdown
72 lines
1.9 KiB
Markdown
# 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` 配置正确
|