# @frontman-ai/vite 中文文档

规范地址：https://npmcn.com/package/%40frontman-ai/vite/

版本：2\.0\.2
npm 元数据更新时间：2026-10-21T12:51:01.613Z
中文译文更新时间：2026-11-15T15:35:52.670Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40frontman-ai/vite
原文对照：https://npmcn.com/package/%40frontman-ai/vite/?lang=original
项目主页：https://frontman.sh/
源码仓库：https://github.com/frontman-ai/frontman

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：338 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：vite \>=5\.0\.0
- 首次发布：2026-02-16T10:21:05.619Z
- 最新版本发布：2026-10-21T12:51:01.273Z
- 近 30 天下载量：4427（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 30 个）

## 中文简介

Frontman的Vite集成 - AI动力开发工具

## 安装

```sh
npm install @frontman-ai/vite
```

也可以使用：`pnpm add @frontman-ai/vite`、`yarn add @frontman-ai/vite`、`bun add @frontman-ai/vite`

## README

# @ frontman-ai/vite (中文(简体) )

Frontman的Vite集成 - 为任何基于Vite的应用程序(React,Vue,Svelte,SolidJS,香草等)提供AI-动力开发工具.

## 安装

### 快速安装( 建议)

安装Frontman的最快方法是使用我们的CLI安装器:

```bash
npx @frontman-ai/vite install

# Or with a custom server host
npx @frontman-ai/vite install --server frontman.company.com
```

安装器会:

-   检测您的 Vite 工程和软件包管理器
-   安装 `@frontman-ai/vite` 作为 dev 依赖
-   添加 `frontmanPlugin({ host: '...' })` 给您的 `vite.config.ts` 插件阵列( 或创建一个)

### CLI 选项

```bash
npx @frontman-ai/vite install [options]

Options:
  --server <host>   Frontman server host (default: api.frontman.sh)
  --prefix <path>   Target directory (default: current directory)
  --dry-run         Preview changes without writing files
  --skip-deps       Skip dependency installation
  --help            Show help message
```

### 手动安装

如果您喜欢手动设置 :

```bash
npm install -D @frontman-ai/vite
```

然后将插件添加到您的 `vite.config.ts`数字 :

```typescript
import { defineConfig } from 'vite';
import { frontmanPlugin } from '@frontman-ai/vite';

export default defineConfig({
  plugins: [
    frontmanPlugin({ host: 'api.frontman.sh' }),
    // ...your other plugins
  ],
});
```

## 快速启动

在运行安装器后, 启动您的 Vite Dev 服务器 :

```bash
npm run dev
```

然后打开您的浏览器 `http://localhost:5173/frontman` 进入前线部队.

随着默认主机设置,Frontman将您重定向到 `api.frontman.sh` 然后将您送回本地 `/frontman` URL (中文(简体) ). 在您的第一个提示前, 连接一个支持的 AI 提供者与 OAuth 或者添加 API 密钥 。 如果您配置了另一个Frontman服务器, 请在服务器上签名 .

## 配置选项

```typescript
frontmanPlugin({
  host: 'api.frontman.sh',         // Frontman server host (default: env FRONTMAN_HOST or "frontman.local:4000")
  basePath: 'frontman',            // Base path for Frontman routes (default: "frontman")
  isDev: false,                    // Dev mode (default: inferred from host — true unless host is "api.frontman.sh")
  projectRoot: '.',                // Project root directory (default: env PROJECT_ROOT or cwd)
  sourceRoot: '.',                 // Source root for resolving file paths (default: projectRoot)
  clientUrl: 'https://...',        // Custom client bundle URL (default: inferred from isDev)
  clientCssUrl: 'https://...',     // Custom client CSS URL (default: inferred from isDev)
  entrypointUrl: 'http://...',     // Custom entrypoint URL for the API
});
```

### 理解 `host` 选项

这个 `host` 选项指定客户端 UI 将连接的 Frontman 服务器用于AI 能力。 你来的时候 `/frontman` 在您的 Vite 应用程序中:

1.  该插件为 Frontman UI HTML 服务
2.  用户界面加载客户端 JavaScript `?host=<your-host>`
3.  客户端建立WebSocket连接 `wss://<host>/socket`
4.  AI 交互和工具调用通过此连接流出

插件本身不连接到Frontman服务器 - 它只传递主机给客户端.

**实例:**

-   生产: `host: 'api.frontman.sh'` • 客户端连接 `wss://api.frontman.sh/socket`
-   本地 dev : `host: 'frontman.local:4000'` • 客户端连接 `wss://frontman.local:4000/socket`

`api.frontman.sh` 是唯一的生产服务器。 任何其他主机值都作为 Dev 模式处理,它会改变默认值 `clientUrl` 从本地 dev 服务器装入,而不是生产 CDN.

## 支持的框架

此插件与任何基于 Vite 的项目配合 :

-   反应(通过) `@vitejs/plugin-react`(中文(简体) )
-   Vue( 通过 `@vitejs/plugin-vue`(中文(简体) )
-   斯维尔特(通过 `@sveltejs/vite-plugin-svelte`(中文(简体) )
-   固体JS( 通过 `vite-plugin-solid`(中文(简体) )
-   香草联合材料/TS
-   任何其他可视兼容框架

| 版本 | 状态 |
| --- | --- |
| 维特 5.x | 已完全支持 |
| 维特 6.x | 已完全支持 |

## 建筑

```
Vite Dev Server
│
├─> configureServer hook
│   └─> frontmanPlugin registers Connect middleware
│       └─> Adapts Node.js req/res ↔ Web API Request/Response
│
├─> GET /frontman
│   └─> Serves Frontman UI (HTML + client bundle + CSS)
│
├─> GET /frontman/tools
│   └─> Returns tool definitions (file read, write, search, etc.)
│
├─> POST /frontman/tools/call
│   └─> Executes tool → returns SSE stream with results
│
├─> POST /frontman/resolve-source-location
│   └─> Resolves source maps to original component locations
│
└─> OPTIONS /frontman/*
    └─> CORS preflight handling
```

非前卫路线经过维特的普通dev服务器处理.

### 关键技术细节

**节点.js QQWeb API 适应器**

-   Vite 的 Dev 服务器使用 Node.js `IncomingMessage`编号 :`ServerResponse`
-   前人中间软件使用 Web API `Request`编号 :`Response`
-   插件介于两者之间, 包括 SSE 流管道

## 解决问题

### 前卫 UI 未装入

**检查 1: 验证已注册的插件** 确保 `frontmanPlugin()` 在你身边 `vite.config.ts` 插件阵列和您的 dev 服务器正在运行 .

**检查 2: 检查 URL** 默认路径是 `http://localhost:5173/frontman`。如果你改变了 `basePath` 选项,则使用该路径。 如果 Vite 在不同的端口运行, 请在 URL 中使用该端口 .

### 安装器显示“ 需要手动修改 ”

当安装者找不到 `plugins: [` 要注入的虚拟配置中。 手动添加导入和插件调用, 如所示 [手动安装](https://npmcn.com/package/%40frontman-ai/vite/#readme-manual-installation)。 。 。 .

### 浏览器控制台中的 CORS 错误

插件包括 CORS 标题 `/frontman/*` 路线。 如果您看到 CORS 错误, 请确认请求会转到正确的 Vite dev 服务器 URL .

## 许可证

阿帕奇 - 2.0

## 常见问题

### @frontman-ai/vite 是什么？

Frontman的Vite集成 - AI动力开发工具

### 如何安装 @frontman-ai/vite？

在项目目录运行 npm install @frontman-ai/vite，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vite（\>=5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 frontman-vite，可以用 npx frontman-vite 直接运行。

### @frontman-ai/vite 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @frontman-ai/vite 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @frontman-ai/vite 可以商用吗？

@frontman-ai/vite 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @frontman-ai/vite 的下载量有多少？

根据 npm 官方下载统计，@frontman-ai/vite 在 2026/10/16 – 2026/11/14 这 30 天内被下载 4,427 次，日均约 148 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @frontman-ai/vite 还在维护吗？

最新版本 2\.0\.2 发布于 2026/10/21（25 天前）；至今共发布 30 个版本，其中过去 12 个月发布了 30 个；首次发布于 2026/02/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。