更新生产环境配置,修改 API 基础地址为新的域名,并在 Vite 配置中添加手动分块设置以优化构建输出。
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
# 生产环境API基础URL(根据实际情况选择)
|
# 生产环境API基础URL(根据实际情况选择)
|
||||||
VITE_API_BASE=http://192.140.164.137:18080
|
VITE_API_BASE=https://2.uzi0.cc/api
|
||||||
|
|
||||||
# 前端基础URL(用于生成分享链接)
|
# 前端基础URL(用于生成分享链接)
|
||||||
VITE_BASE_URL=https://2.uzi0.cc/
|
VITE_BASE_URL=https://2.uzi0.cc
|
||||||
71
DEPLOYMENT.md
Normal file
71
DEPLOYMENT.md
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
# 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` 配置正确
|
||||||
8
_redirects
Normal file
8
_redirects
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
# Netlify _redirects 文件
|
||||||
|
# 放置在 dist 目录下
|
||||||
|
|
||||||
|
# API 代理
|
||||||
|
/api/* http://192.140.164.137:18080/:splat 200
|
||||||
|
|
||||||
|
# SPA 路由回退
|
||||||
|
/* /index.html 200
|
||||||
32
apache.htaccess
Normal file
32
apache.htaccess
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
# Apache .htaccess 配置文件
|
||||||
|
# 放置在 dist 目录下
|
||||||
|
# 解决 Vue SPA 应用的路由问题
|
||||||
|
|
||||||
|
<IfModule mod_rewrite.c>
|
||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
# 处理预检请求
|
||||||
|
RewriteCond %{REQUEST_METHOD} OPTIONS
|
||||||
|
RewriteRule ^(.*)$ $1 [R=200,L]
|
||||||
|
|
||||||
|
# 静态资源直接访问
|
||||||
|
RewriteCond %{REQUEST_FILENAME} -f
|
||||||
|
RewriteRule ^ - [L]
|
||||||
|
|
||||||
|
# API请求代理到后端(需要配置虚拟主机)
|
||||||
|
RewriteCond %{REQUEST_URI} ^/api/
|
||||||
|
RewriteRule ^api/(.*)$ http://192.140.164.137:18080/$1 [P,L]
|
||||||
|
|
||||||
|
# SPA路由回退到index.html
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteRule . /index.html [L]
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# CORS 头部设置
|
||||||
|
<IfModule mod_headers.c>
|
||||||
|
Header always set Access-Control-Allow-Origin "*"
|
||||||
|
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
|
||||||
|
Header always set Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization"
|
||||||
|
Header always set Access-Control-Max-Age "1728000"
|
||||||
|
</IfModule>
|
||||||
53
nginx.conf
Normal file
53
nginx.conf
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
# Nginx 配置文件
|
||||||
|
# 解决 Vue SPA 应用的路由问题
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name 2.uzi0.cc;
|
||||||
|
root /path/to/your/dist; # 修改为你的实际部署路径
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# 处理静态资源
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
try_files $uri =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
# API代理 - 解决CORS问题
|
||||||
|
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';
|
||||||
|
|
||||||
|
# 处理预检请求
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# SPA 路由回退 - 关键配置
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ @fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
location @fallback {
|
||||||
|
rewrite ^.*$ /index.html last;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 错误页面
|
||||||
|
error_page 404 /index.html;
|
||||||
|
}
|
||||||
@@ -14,6 +14,14 @@ export default defineConfig({
|
|||||||
assetsDir: 'assets',
|
assetsDir: 'assets',
|
||||||
sourcemap: false, // 生产环境不生成sourcemap
|
sourcemap: false, // 生产环境不生成sourcemap
|
||||||
minify: 'terser', // 使用terser压缩
|
minify: 'terser', // 使用terser压缩
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks: {
|
||||||
|
vendor: ['vue', 'vue-router'],
|
||||||
|
utils: ['axios']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 开发服务器配置(仅开发环境生效)
|
// 开发服务器配置(仅开发环境生效)
|
||||||
server: {
|
server: {
|
||||||
|
|||||||
83
宝塔面板Nginx配置.conf
Normal file
83
宝塔面板Nginx配置.conf
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
# 宝塔面板 Nginx 站点配置
|
||||||
|
# 请将以下配置添加到你的站点配置中
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name 2.uzi0.cc; # 你的域名
|
||||||
|
index index.php index.html index.htm default.php default.htm default.html;
|
||||||
|
root /www/wwwroot/2.uzi0.cc; # 修改为你的实际网站根目录路径
|
||||||
|
|
||||||
|
# SSL配置(如果有SSL证书)
|
||||||
|
# listen 443 ssl http2;
|
||||||
|
# ssl_certificate /path/to/your/cert.pem;
|
||||||
|
# ssl_certificate_key /path/to/your/cert.key;
|
||||||
|
|
||||||
|
# 安全配置
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN";
|
||||||
|
add_header X-XSS-Protection "1; mode=block";
|
||||||
|
add_header X-Content-Type-Options "nosniff";
|
||||||
|
|
||||||
|
# 静态资源缓存配置
|
||||||
|
location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
add_header Access-Control-Allow-Origin *;
|
||||||
|
try_files $uri =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 直接指定index.html处理所有404
|
||||||
|
error_page 404 /index.html;
|
||||||
|
|
||||||
|
# 禁止访问的文件类型
|
||||||
|
location ~ /\.ht {
|
||||||
|
deny all;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~ /\. {
|
||||||
|
deny all;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 宝塔面板默认的安全配置
|
||||||
|
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md) {
|
||||||
|
return 404;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 宝塔面板访问日志
|
||||||
|
access_log /www/wwwlogs/2.uzi0.cc.log;
|
||||||
|
error_log /www/wwwlogs/2.uzi0.cc.error.log;
|
||||||
|
}
|
||||||
105
宝塔面板修改后的配置.conf
Normal file
105
宝塔面板修改后的配置.conf
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
server
|
||||||
|
{
|
||||||
|
listen 81;
|
||||||
|
listen 443 ssl http2 ;
|
||||||
|
listen 991;
|
||||||
|
listen 80;
|
||||||
|
server_name 2.uzi0.cc 192.140.164.137;
|
||||||
|
index index.html index.htm default.htm default.html;
|
||||||
|
root /www/wwwroot/192.140.164.137_81;
|
||||||
|
#CERT-APPLY-CHECK--START
|
||||||
|
# 用于SSL证书申请时的文件验证相关配置 -- 请勿删除并保持这段设置在优先级高的位置
|
||||||
|
include /www/server/panel/vhost/nginx/well-known/192.140.164.137_81.conf;
|
||||||
|
#CERT-APPLY-CHECK--END
|
||||||
|
|
||||||
|
#SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
|
||||||
|
#error_page 404/404.html;
|
||||||
|
ssl_certificate /www/server/panel/vhost/cert/192.140.164.137_81/fullchain.pem;
|
||||||
|
ssl_certificate_key /www/server/panel/vhost/cert/192.140.164.137_81/privkey.pem;
|
||||||
|
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
|
||||||
|
ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
|
||||||
|
ssl_prefer_server_ciphers on;
|
||||||
|
ssl_session_tickets on;
|
||||||
|
ssl_session_cache shared:SSL:10m;
|
||||||
|
ssl_session_timeout 10m;
|
||||||
|
add_header Strict-Transport-Security "max-age=31536000";
|
||||||
|
error_page 497 https://$host$request_uri;
|
||||||
|
|
||||||
|
#SSL-END
|
||||||
|
|
||||||
|
#ERROR-PAGE-START 错误页配置,可以注释、删除或修改
|
||||||
|
#error_page 404 /404.html;
|
||||||
|
#error_page 502 /502.html;
|
||||||
|
#ERROR-PAGE-END
|
||||||
|
|
||||||
|
#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
|
||||||
|
include /www/server/panel/vhost/rewrite/html_192.140.164.137_81.conf;
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#禁止访问的文件或目录
|
||||||
|
location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
|
||||||
|
{
|
||||||
|
return 404;
|
||||||
|
}
|
||||||
|
|
||||||
|
#一键申请SSL证书验证目录相关设置
|
||||||
|
location ~ \.well-known{
|
||||||
|
allow all;
|
||||||
|
}
|
||||||
|
|
||||||
|
#禁止在证书验证目录放入敏感文件
|
||||||
|
if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
|
||||||
|
return 403;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~ .*\\.(gif|jpg|jpeg|png|bmp|swf)$
|
||||||
|
{
|
||||||
|
expires 30d;
|
||||||
|
error_log /dev/null;
|
||||||
|
access_log /dev/null;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~ .*\\.(js|css)?$
|
||||||
|
{
|
||||||
|
expires 12h;
|
||||||
|
error_log /dev/null;
|
||||||
|
access_log /dev/null;
|
||||||
|
}
|
||||||
|
access_log /www/wwwlogs/192.140.164.137_81.log;
|
||||||
|
error_log /www/wwwlogs/192.140.164.137_81.error.log;
|
||||||
|
}
|
||||||
98
宝塔面板操作步骤.md
Normal file
98
宝塔面板操作步骤.md
Normal file
@@ -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 路由配置。
|
||||||
Reference in New Issue
Block a user