# test-device

**Repository Path**: RiversRoads/test-device

## Basic Information

- **Project Name**: test-device
- **Description**: 测试视频哈哈哈哈哈哈哈哈哈哈
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-11
- **Last Updated**: 2026-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 设备调试工具

这是一个基于 Vue 3、Vite、Pinia 和 Bun 的设备调试前端项目。

## 常用命令

```bash
bun install
bun run dev
bun run build
bun run preview
```

## 打包访问前缀

`VITE_APP_BASE` 用来控制打包后资源的访问前缀。

```bash
# 示例：dist 内容最终通过 https://example.com/public/test-device/ 访问
VITE_APP_BASE=/public/test-device/
bun run build
```

- 根路径部署使用 `/`。
- 子目录部署使用类似 `/public/test-device/` 的路径。
- 只有需要用相对文件路径打开构建产物时，才使用 `./`。

## 目录说明

```text
src/
  assets/            Vue 组件内使用的静态资源。
  router/            路由表和页面标题处理。
  services/          浏览器请求、协议客户端等服务层逻辑。
  stores/            Pinia 状态和本地持久化逻辑。
  styles/            全局样式。
  views/
    home/            调试工具入口页。
    api-debug/       接口请求测试页面。
    mqtt-debug/      MQTT 调试页面。
    video-debug/     视频流调试页面。
```

## 接口请求调试

- 接口调试页路径为 `/api-debug`。
- 请求器封装在 `src/api/request.js`。
- 支持 GET、POST、PUT、PATCH、DELETE。
- 支持 Query 参数、Headers、JSON Body、文本 Body、表单 Body。
- 支持取消请求、响应 Body/Headers 查看、响应复制和请求历史。
- `VITE_API_BASE_URL` 可配置默认请求前缀；留空时直接请求页面输入的完整 URL。

## 视频调试

- 视频调试页通过 npm 包 `axios` 请求接口。
- HLS 播放通过 npm 包 `hls.js` 处理。
- 不要再把 `axios.min.js`、`hls.js` 这类静态包放到项目根目录手动引入。
- 视频接口地址通过环境变量配置：

```bash
VITE_VIDEO_DEBUG_URL=https://iot.meseeagro.com/api/v1/data/debug_pull_video_flow
VITE_VIDEO_STREAMING_URL=https://middleware.meseelink.com/streaming
```

## MQTT 调试

- `ws` / `wss` 使用 MQTT.js 在浏览器中直连。
- `mqtt` / `mqtts` 需要 Node MQTT 网关中转，因为浏览器不能直接打开原生 TCP MQTT 连接。
- MQTT 订阅列表和连接记录保存在 localStorage。
- 默认环境配置在 `.env.development` 和 `.env.production`。
- 私密账号密码放在 `.env.local`，不要写进公开环境文件。

更多部署说明见 [docs/deployment.md](./docs/deployment.md)。