# 通过 IP 地址访问用户前端指南

## 配置说明

已配置 `vite.config.js` 以支持通过 IP 地址访问项目。

### 配置内容

```javascript
server: {
  host: '0.0.0.0', // 监听所有网络接口，允许通过IP访问
  port: 5173, // 默认端口
  strictPort: false, // 如果端口被占用，自动尝试下一个可用端口
  open: false, // 启动时不自动打开浏览器
}
```

## 启动项目

在 `user_frontend` 目录下运行:

```bash
npm run dev
```

## 获取本机 IP 地址

### Windows 系统
打开命令提示符（CMD）或 PowerShell，运行:
```bash
ipconfig
```
查找 "IPv4 地址" 或 "IPv4 Address"，例如: `192.168.1.100`

### Linux/Mac 系统
打开终端，运行:
```bash
ifconfig
```
或
```bash
ip addr show
```
查找 inet 地址，例如: `192.168.1.100`

## 访问方式

启动项目后，你会看到类似以下的输出:

```
VITE v8.0.4  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.100:5173/
➜  press h + enter to show help
```

### 访问地址

1. **本机访问**:
   - http://localhost:5173/
   - http://127.0.0.1:5173/

2. **局域网内其他设备访问**:
   - http://你的IP地址:5173/
   - 例如: http://192.168.1.100:5173/

3. **手机访问**（需要在同一局域网内）:
   - 确保手机连接到同一个 WiFi 网络
   - 在手机浏览器中输入: http://你的IP地址:5173/

## 注意事项

### 1. 防火墙设置
如果无法通过 IP 访问，可能需要配置防火墙:

**Windows 防火墙**:
1. 打开 "Windows Defender 防火墙"
2. 点击 "高级设置"
3. 选择 "入站规则" -> "新建规则"
4. 选择 "端口" -> "TCP" -> 输入端口号 "5173"
5. 允许连接

**或者临时关闭防火墙测试**（不推荐长期使用）

### 2. 网络要求
- 访问设备必须在同一局域网内
- 路由器没有设置设备隔离
- 确保端口 5173 没有被其他程序占用

### 3. 后端 API 配置
如果前端需要访问后端 API，确保后端也配置了允许跨域访问和 IP 访问。

检查 `user_frontend/src/services/api.js` 中的 baseURL 配置:
```javascript
// 如果需要通过 IP 访问后端，修改为:
baseURL: 'http://你的IP地址:8000/api'
```

### 4. WebSocket 连接
如果使用了 WebSocket（如聊天功能），也需要更新 WebSocket 连接地址:
```javascript
// 在 Dashboard.jsx 中
const newWs = new WebSocket(`ws://你的IP地址:8000/ws/chat/${room.id}/${user.id}`);
```

## 常见问题

### Q1: 启动后只显示 localhost，没有显示 Network 地址
**A**: 确保 `vite.config.js` 中 `host` 设置为 `'0.0.0.0'`

### Q2: 其他设备无法访问
**A**: 检查以下几点:
1. 防火墙是否允许端口 5173
2. 设备是否在同一局域网
3. IP 地址是否正确
4. 端口是否被占用

### Q3: 访问后页面加载但功能不正常
**A**: 可能是后端 API 地址配置问题，需要同时配置后端允许 IP 访问

### Q4: 手机访问显示 "无法连接"
**A**: 
1. 确保手机和电脑在同一 WiFi 网络
2. 检查路由器是否开启了 AP 隔离功能
3. 尝试关闭电脑防火墙测试

## 生产环境部署

如果需要部署到生产环境:

1. **构建项目**:
```bash
npm run build
```

2. **预览构建结果**:
```bash
npm run preview
```

3. **使用 Nginx 或其他 Web 服务器部署** `dist` 目录

## 安全建议

1. 仅在开发环境使用 IP 访问
2. 生产环境使用域名和 HTTPS
3. 不要将开发服务器暴露到公网
4. 使用防火墙限制访问来源

## 测试步骤

1. 启动项目: `npm run dev`
2. 记录显示的 Network 地址
3. 在同一局域网的其他设备上访问该地址
4. 测试所有功能是否正常

## 完成状态

✅ vite.config.js 已配置
✅ 支持通过 IP 地址访问
✅ 支持局域网内其他设备访问
✅ 支持手机访问（同一 WiFi）
