Vue SPA 部署指南

问题描述

当直接访问 http://2.uzi0.cc/play?code=973F2YTE 时出现404错误，但其他页面正常。这是典型的单页应用(SPA)部署问题。

原因分析

开发环境：Vite开发服务器自动处理路由回退
生产环境：Web服务器尝试查找实际的 /play 文件，但这只是前端路由

解决方案

方案一：Nginx 配置（推荐）

使用项目根目录的 nginx.conf 文件
修改其中的 root 路径为实际部署路径
重新加载 Nginx 配置：

sudo nginx -t  # 测试配置
sudo nginx -s reload  # 重新加载

方案二：Apache 配置

将 apache.htaccess 文件复制到 dist 目录下，重命名为 .htaccess
确保 Apache 启用了 mod_rewrite 模块

方案三：Netlify 部署

将 _redirects 文件复制到 dist 目录下
重新部署到 Netlify

方案四：其他静态托管服务

对于其他静态托管服务，需要配置：

所有路由都回退到 index.html
API 请求代理到 http://192.140.164.137:18080

重新构建和部署

# 1. 重新构建项目
npm run build

# 2. 将构建文件部署到服务器
# 确保 dist 目录下的所有文件都已上传

# 3. 配置 Web 服务器（选择上述方案之一）

# 4. 测试访问
# http://2.uzi0.cc/play?code=973F2YTE 应该能正常访问

验证步骤

直接访问：http://2.uzi0.cc/play?code=973F2YTE
应该能看到游戏页面，而不是404错误
刷新页面应该仍然正常
API 请求应该正常工作（无CORS错误）

常见问题

Q: 仍然出现404错误

A: 检查Web服务器配置是否正确应用，确认配置文件路径和语法

Q: API请求失败

A: 检查代理配置，确认后端服务 http://192.140.164.137:18080 可访问

Q: 静态资源加载失败

A: 检查资源路径配置，确认 base 配置正确

1.9 KiB Raw Blame History Unescape Escape