二级目录

二级目录部署配置说明

本节介绍如何将系统部署在二级路径下（例如 https://x.tduckcloud.com/tduck/），适用于 Nginx 作为前端资源服务器的场景。

一、修改前端打包基础路径

打开前端项目根目录下的 .env 文件，设置 VITE_PUBLIC_PATH 为你要部署的二级路径（例如 /tduck）：

# 本地开发端口号
VITE_PORT = 8888

# 是否在运行 npm run dev 时自动打开浏览器
VITE_OPEN = false

# 是否开启 CDN（影响打包文件资源路径）
VITE_OPEN_CDN = false

# 部署路径，若使用二级目录请填写对应路径
VITE_PUBLIC_PATH = /tduck

⚠️ 如果使用 http-server 或本地静态资源服务器测试，请将 VITE_PUBLIC_PATH 设为空，避免路径错误。

二、修改 Nginx 配置支持二级目录

编辑你的 Nginx 配置文件，增加二级目录的静态资源映射和 API 代理设置。

示例配置：

server {
    listen       80;
    listen       [::]:80;
    server_name  localhost;

    # 错误页配置
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }

    # 前端资源路径（注意：与 VITE_PUBLIC_PATH 一致）
    location /tduck {
        alias /usr/share/nginx/html/tduck/;
        index index.html;
        try_files $uri $uri/ /tduck/index.html;
    }

    # 后端接口代理（根据实际后端地址修改）
    location /tduck-api/ {
        proxy_pass http://101.35.115.221:8996/tduck-api/;

        # 跨域设置
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;

        proxy_http_version 1.1;

        # 请求超时设置
        proxy_connect_timeout 60s;
        proxy_read_timeout 60s;
        proxy_send_timeout 60s;

        # IP 及协议穿透
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # WebSocket 支持
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Origin "";
    }
}

三、注意事项

• 前端路径和 Nginx 中的二级目录路径必须保持一致（例如都为 /tduck）；
• alias 路径应指向打包后的 dist 目录所在位置；
• 如果你使用的是 HTTPS 或多域名环境，请同步调整 server_name 和 listen 配置；
• 如果配置后访问出现空白页，优先检查浏览器控制台的资源加载路径是否错误（路径应以 /tduck/ 开头）；
• 前端打包后文件应上传到 /usr/share/nginx/html/tduck/ 目录中（根据实际配置路径可能不同）；
• 修改配置后请重启 Nginx：

nginx -t         # 检查配置语法
nginx -s reload  # 重载配置