dwsy/har-to-vue

HAR to Vue 转换器

将 HAR 文件转换为 Vue 源代码，支持批量处理网络请求并生成可复用的 Vue 组件和 API 服务。

快速开始

基本转换

# 转换单个 HAR 文件为 Vue 组件
bun scripts/har_to_vue.ts input.har -o output.vue

# 批量转换所有请求为 API 服务
bun scripts/har_to_vue.ts input.har --mode api -o services/

常用场景

复刻网站组件：

bun scripts/har_to_vue.ts capture.har --mode component --template composition -o components/

生成 API 服务：

bun scripts/har_to_vue.ts capture.har --mode api --library axios -o api/

完整页面生成：

bun scripts/har_to_vue.ts capture.har --mode page -o pages/home/

转换模式

Component 模式

将 HAR 请求转换为 Vue 组件，包含数据绑定和模板结构。

生成内容：

• 响应数据的响应式状态（ref/reactive）
• 数据获取逻辑（onMounted/computed）
• 基于 JSON 结构的模板

选项：

• --template <composition|options>: 使用 Composition API 或 Options API
• --typescript: 生成 TypeScript 类型定义
• --with-props: 从请求参数生成 props 定义

API 模式

将 HAR 请求转换为 API 服务函数。

生成内容：

• 每个请求对应的函数
• TypeScript 类型定义
• 请求/响应接口
• 错误处理

选项：

• --library <fetch|axios|ky>: HTTP 客户端库
• --base-url: 注入基础 URL
• --group-by <path|domain>: 分组策略

Page 模式

生成完整的 Vue 页面，包含布局、路由和状态管理。

生成内容：

• 页面组件
• 路由配置
• API 服务文件
• 类型定义
• Store（Pinia/Vuex）集成

选项：

• --with-router: 生成路由配置
• --with-store: 生成状态管理
• --layout <default|admin|blank>: 布局模板

HAR 解析规则

请求映射

| HAR 字段 | Vue 映射 | |---------|---------| | request.method | HTTP 方法（GET/POST/PUT/DELETE） | | request.url | API 端点路径 | | request.headers | 请求头配置 | | request.postData | 请求体（JSON/FormData） | | response.content | 响应数据结构 |

类型推断

• 自动从 JSON 响应推断 TypeScript 接口
• 数组项提取为独立类型
• 枚举值生成为 union types
• 可选字段标记为 ?

命名规范

• URL 路径 → 函数名（/api/users → getUsers）
• 驼峰转换（user_profile → UserProfile）
• 移除重复前缀（getUserList → getList）

输出结构

Component 模式输出

UserList.vue
├── <script setup>
│   ├── imports（ref, onMounted, 等）
│   ├── types（接口定义）
│   ├── state（响应式数据）
│   ├── methods（数据获取）
│   └── lifecycle（onMounted）
├── <template>
│   └── 基于 JSON 结构的绑定
└── <style>
    └── 基础样式

API 模式输出

api/
├── index.ts          # 导出所有 API
├── types.ts          # 类型定义
├── users.ts          # 用户相关 API
├── products.ts       # 产品相关 API
└── utils.ts          # 请求工具（拦截器、错误处理）

Page 模式输出

pages/
└── dashboard/
    ├── index.vue     # 页面组件
    ├── api.ts        # API 服务
    ├── types.ts      # 类型定义
    ├── router.ts     # 路由配置
    └── store.ts      # 状态管理

高级功能

请求分组

按 URL 模式自动分组 API：

# 按路径分组
bun scripts/har_to_vue.ts input.har --group-by path

# 按域名分组
bun scripts/har_to_vue.ts input.har --group-by domain

# 自定义分组规则
bun scripts/har_to_vue.ts input.har --group-config custom-rules.json

过滤请求

# 仅包含特定域名
bun scripts/har_to_vue.ts input.har --filter-domain api.example.com

# 排除静态资源
bun scripts/har_to_vue.ts input.har --exclude-extensions css,js,png,jpg

# 仅包含特定方法
bun scripts/har_to_vue.ts input.har --methods GET,POST

模板定制

使用自定义模板文件：

bun scripts/har_to_vue.ts input.har --template-file templates/custom.vue

模板变量：

• {{ requests }}: 请求列表
• {{ types }}: 类型定义
• {{ imports }}: 导入语句
• {{ componentName }}: 组件名称

配置文件

支持配置文件 har-to-vue.config.json：

{
  "mode": "component",
  "template": "composition",
  "typescript": true,
  "library": "axios",
  "output": "./src",
  "filter": {
    "includeDomains": ["api.example.com"],
    "excludeExtensions": ["css", "js", "png"]
  },
  "naming": {
    "style": "camelCase",
    "removePrefixes": ["get", "fetch"]
  }
}

最佳实践

1. 清理 HAR 文件

转换前清理不必要的请求：

• 过滤静态资源（图片、CSS、JS）
• 移除开发工具请求（hot reload、sourcemaps）
• 保留业务相关 API

2. 类型优化

手动优化生成的类型：

• 合并重复的类型定义
• 提取通用接口
• 添加适当的注释

3. 错误处理

添加统一的错误处理：

// utils.ts
export async function fetchWithErrorHandler(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(response.statusText);
    return await response.json();
  } catch (error) {
    console.error('API Error:', error);
    throw error;
  }
}

4. 环境变量

使用环境变量管理 API 配置：

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://api.example.com';

参考资料

• HAR 格式规范
• Vue 3 Composition API
• TypeScript 类型推断
• Axios 拦截器
• 常见转换模式