# 前端部署到宝塔指南

## 构建产物位置

构建后的静态文件位于：`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配置：

```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