# 部署说明

## 问题解决

### 文件上传问题修复

之前程序部署到线上环境后无法上传文件的问题已经修复。主要修改包括：

1. **移除硬编码地址**：将前端代码中硬编码的 `http://localhost:3000` 地址替换为动态配置
2. **环境配置**：创建了环境配置文件来管理不同环境的API地址
3. **统一图片处理**：统一了图片URL的处理逻辑

### 修改的文件

- `frontend/src/config/index.js` - 新增环境配置文件
- `frontend/.env.development` - 开发环境配置
- `frontend/.env.production` - 生产环境配置
- `frontend/src/views/Transfers.vue` - 转账页面
- `frontend/src/views/Profile.vue` - 个人资料页面
- `frontend/src/views/Matching.vue` - 匹配页面

## 部署步骤

### 1. 前端构建

```bash
cd frontend
npm run build
```

### 2. 后端部署

确保服务器上有以下目录结构：
```
/
├── server.js
├── routes/
├── middleware/
├── uploads/          # 文件上传目录
├── frontend/dist/    # 前端构建文件
└── admin/dist/       # 管理后台构建文件
```

### 3. 环境变量配置

在生产环境中，确保以下环境变量正确设置：

```bash
# 数据库配置
DB_HOST=your_db_host
DB_USER=your_db_user
DB_PASSWORD=your_db_password
DB_NAME=your_db_name

# 服务器配置
PORT=3000
NODE_ENV=production
```

### 4. 文件权限

确保 `uploads` 目录有正确的读写权限：

```bash
chmod 755 uploads
chown -R www-data:www-data uploads  # 根据你的服务器用户调整
```

### 5. Nginx 配置（推荐）

如果使用 Nginx 作为反向代理，配置示例：

```nginx
server {
    listen 80;
    server_name your-domain.com;

    # 静态文件
    location /uploads/ {
        alias /path/to/your/app/uploads/;
        expires 1d;
        add_header Cache-Control "public, immutable";
    }

    # API 请求
    location /api/ {
        proxy_pass http://localhost:3000;
        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 / {
        proxy_pass http://localhost:3000;
        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;
    }
}
```

### 6. PM2 部署（推荐）

使用 PM2 管理 Node.js 进程：

```bash
# 安装 PM2
npm install -g pm2

# 启动应用
pm2 start server.js --name "your-app"

# 设置开机自启
pm2 startup
pm2 save
```

## 验证部署

1. 访问网站确保页面正常加载
2. 测试用户注册/登录功能
3. 测试文件上传功能（头像、收款码、转账凭证等）
4. 检查浏览器控制台是否有错误

## 故障排除

### 文件上传失败

1. 检查 `uploads` 目录权限
2. 检查服务器磁盘空间
3. 查看服务器日志：`pm2 logs your-app`

### 图片显示不正常

1. 检查 Nginx 静态文件配置
2. 确认图片文件存在于 `uploads` 目录
3. 检查图片URL是否正确

### API 请求失败

1. 检查服务器是否正常运行
2. 检查数据库连接
3. 查看服务器错误日志