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 拦截器

• 常见转换模式