前端部署到宝塔指南

构建产物位置

构建后的静态文件位于：douyin/frontend/dist/ 目录

包含以下文件：

• index.html - 入口文件
• assets/ - 静态资源（CSS、JS）
• favicon.ico - 网站图标

宝塔部署步骤

1. 准备工作

1. 登录宝塔面板
2. 确保已创建网站（如果没有，请先创建）

2. 上传文件

有两种方式：

方式一：通过宝塔文件管理器

1. 进入宝塔面板 → 文件
2. 找到网站根目录（通常是 /www/wwwroot/你的域名/）
3. 删除或备份旧文件
4. 上传 dist 目录中的所有文件到网站根目录

方式二：通过FTP/SFTP

1. 使用FTP工具（如FileZilla）连接到服务器
2. 进入网站根目录
3. 上传 dist 目录中的所有文件

3. 配置Nginx（如果使用）

如果需要配置反向代理到后端API，编辑Nginx配置：

server {
    listen 80;
    server_name 你的域名;
    root /www/wwwroot/你的域名;
    index index.html;

    # 前端路由配置（Vue Router使用history模式）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 后端API代理（根据实际情况修改）
    location /api {
        proxy_pass http://localhost:5070/api;  # 后端服务地址
        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;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

4. 环境变量配置

如果前端使用了环境变量，需要在宝塔中配置：

1. 进入宝塔面板 → 网站 → 设置 → 配置文件
2. 添加环境变量（如果需要）： nginx # 在server块中添加 env VITE_API_BASE_URL;

或者在前端代码中，如果使用相对路径 /api，则会自动使用当前域名。

5. 设置文件权限

1. 进入宝塔面板 → 文件
2. 选中网站根目录
3. 右键 → 权限
4. 设置权限为 755（目录）和 644（文件）
5. 所有者设置为 www（或你的Web服务器用户）

6. 重启服务

1. 如果修改了Nginx配置，点击宝塔面板 → 软件商店 → Nginx → 设置 → 重载配置
2. 或者重启Nginx服务

7. 访问测试

在浏览器中访问你的域名，检查前端是否正常加载。

注意事项

1. 后端API地址：确保前端配置的后端API地址正确，通常有两种方式：

   • 使用相对路径 /api（推荐，会自动使用当前域名）
   • 使用完整URL，需要根据实际部署环境修改

2. 跨域问题：如果前后端不在同一域名，需要在后端配置CORS，或者在Nginx中配置代理

3. HTTPS：如果使用HTTPS，需要在宝塔中配置SSL证书

4. 缓存问题：部署后如果看不到最新内容，可能需要清除浏览器缓存

更新部署

更新时，只需：

1. 重新执行 npm run build
2. 删除服务器上旧的 dist 目录内容
3. 上传新的构建产物
4. 清除浏览器缓存（或强制刷新：Ctrl+F5）

当前构建信息

• 构建时间：$(date)
• Node.js版本：v20.19.6
• 构建工具：Vite 7.2.2
• 框架：Vue 3