[!info] 阅读导览
全文 5 节：方案一 HTML+srcdoc+iframe（1.1）→ 方案二 React/Vue+Blob+iframe（1.2）→ 方案三 WebContainer（1.3）→ 场景选择与综合应用（1.4）→ 总结（1.5）

1. AI 生成代码实时预览方案

随着 AI 在代码生成领域的不断突破，实时预览方案从简单页面展示到完整项目联调各具优势。本文整合了三种主流预览方案（HTML+srcdoc、React/Vue+Blob、WebContainer），并通过 Mermaid 流程图展示每种方案的核心流程，帮助开发者根据实际需求进行选型和组合应用。

1.1. 方案一：HTML + srcdoc + iframe

1.1.1. 原理说明

该方案生成一个包含 HTML、CSS、JS 的单文件文档，再利用 iframe 的 srcdoc 属性直接加载预览内容。

1.1.2. 优点

• 实现简单、预览速度极快
• 适合无需关注代码细节、快速验证页面设计的场景
• 在 AI 原生 IDE 集成中，非常适合生成 landing page 或小游戏预览

1.1.3. 实现步骤

1. 生成单文件 HTML
   AI 根据需求生成整合 HTML、CSS、JS 的文档。

2. 加载依赖
   通过 importmap 或直接引用 CDN 资源，确保外部库正确加载。

3. 实时预览
   将生成的 HTML 代码赋值给 iframe 的 srcdoc 属性，实现即时展示。

1.1.4. 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>实时预览示例</title>
  <script type="importmap">
    {
      "imports": {
        "lodash": "https://cdn.jsdelivr.net/npm/[email protected]/lodash.js"
      }
    }
  </script>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    h1 { color: #333; }
  </style>
</head>
<body>
  <h1>欢迎使用实时预览</h1>
  <p>这是一个由 AI 生成并实时预览的 HTML 文件。</p>
  <script>
    console.log('页面已加载');
  </script>
</body>
</html>

1.1.5. 流程图

graph TD;
    A["生成单文件 HTML"] --> B["加载依赖 (CDN/importmap)"];
    B --> C["设置 iframe srcdoc 属性"];
    C --> D["浏览器即时预览"];

图 1：HTML+srcdoc+iframe 实现流程图
图中展示了从生成单文件 HTML、加载依赖到通过 iframe 的 srcdoc 属性实现实时预览的完整流程。

[!tip] 评论
方案一也可以用于 React/Vue

1.2. 方案二：React/Vue + Blob + iframe

1.2.1. 原理说明

此方案主要用于生成前端框架组件（React 或 Vue）。AI 生成的组件代码经过 Babel 或 VueCompiler 转换后嵌入 HTML 模板，通过 Blob 对象生成 URL，再利用 iframe 的 src 属性加载实现预览。

1.2.2. 优点

• 支持单组件快速预览和调试
• 实现"边写边预览"，提升前端开发效率
• 适用于 AI 辅助组件开发场景

1.2.3. 实现步骤

1. 生成组件代码
   AI 输出符合规范的 React/Vue 单文件组件代码。

2. 代码转换或编译

   • React：利用 Babel.transform 将 JSX 转换成浏览器可运行的 JavaScript
   • Vue：使用 VueCompiler 对组件进行编译

3. 构建 HTML 模板
   将转换后的代码嵌入 HTML 模板中。

4. 生成 Blob URL 并预览
   利用 Blob 对象生成预览 URL，然后赋值给 iframe 的 src 属性。

   const blob = new Blob([html], { type: 'text/html' });
   document.getElementById('previewIframe').src = URL.createObjectURL(blob);
   

1.2.4. 示例代码

// 示例：React 组件预览
const html = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>React 组件预览</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script>
    function App() {
      return React.createElement('h1', null, 'Hello, React 实时预览!');
    }
    ReactDOM.render(React.createElement(App), document.getElementById('root'));
  </script>
</body>
</html>
`;

const blob = new Blob([html], { type: 'text/html' });
document.getElementById('previewIframe').src = URL.createObjectURL(blob);

1.2.5. 流程图

graph TD;
    A["生成组件代码"] --> B["代码转换 (Babel/VueCompiler)"];
    B --> C["构建 HTML 模板"];
    C --> D["生成 Blob URL"];
    D --> E["设置 iframe src 属性"];
    E --> F["实时预览组件"];

图 2：React/Vue+Blob+iframe 实现流程图
图中展示了从生成组件代码、转换编译、构建 HTML 模板、生成 Blob URL 到通过 iframe 实现预览的全过程。

1.2.6. 现成的库

GitHub：https://github.com/nihgwu/react-runner

[!tip] 评论
我用的方案二，配合 esbuild-wasm 体验很好，去年还写了一个浏览器里跑的 npm 配合使用

1.3. 方案三：WebContainer 方案

1.3.1. 原理说明

该方案适用于生成完整项目或多组件联动的情况。利用 WebContainer 构建一个最小化的 Vite 项目骨架，将 AI 生成的多个组件文件与配置文件组合成文件树，再挂载至 WebContainer 内，通过自动安装依赖和启动预览服务，最终将预览地址通过 iframe 展现。

1.3.2. 优点

• 支持完整项目预览和前后端联调
• 实现多组件交互与完整应用场景下的调试
• 与大模型协同开发模式结合，实现"对话即预览"的交互体验

1.3.3. 实现步骤

1. 生成项目文件树
   AI 生成多个组件文件（支持相互 import），同时构建 Vite 项目骨架（包含 index.html、package.json、vite.config.js 等）。

2. 挂载至 WebContainer
   利用 WebContainer 接口将整个文件树挂载到容器中，实现环境隔离和依赖管理。

3. 自动安装依赖并启动预览
   通过 WebContainer 内部命令自动安装依赖（npm/yarn），启动预览服务并获取预览地址。

4. 预览展示
   将预览地址赋值给外部 iframe 的 src 属性，实现完整项目的实时预览。

1.3.4. 流程图

graph TD;
    A["生成项目文件树"] --> B["挂载至 WebContainer"];
    B --> C["自动安装依赖"];
    C --> D["启动预览服务"];
    D --> E["获取预览地址"];
    E --> F["设置 iframe src 属性"];
    F --> G["完整项目预览"];

图 3：WebContainer 方案实现流程图
图中展示了从生成项目文件树、挂载至 WebContainer、自动安装依赖到启动预览服务并最终通过 iframe 展现完整项目预览的完整流程。

1.4. 场景选择与综合应用

在实际应用中，这三种方案可根据需求灵活组合：

• 快速验证页面设计
  对于仅关注页面展示（如 landing page 或小游戏预览）的场景，推荐使用 方案一（HTML+srcdoc）。该方案简单高效，适合 AI 原生 IDE 集成中直接生成并预览。

• 组件开发与迭代调试
  当需求聚焦于单个前端组件的开发和调试时，方案二（React/Vue+Blob） 可以实现"边写边预览"，极大提高开发效率。

• 完整项目构建与联调
  如果需要生成包含多个组件、实现前后端联调的完整项目，方案三（WebContainer） 能够提供更丰富的调试环境，并支持大模型协同开发实现"对话即预览"的交互体验。

开发者可在初期采用方案一或方案二快速验证设计思路，后期逐步引入 WebContainer 架构，构建完善的项目环境。

1.5. 总结

本文整合了 AI 生成代码实时预览的三种主流方案，通过详细的实现步骤、示例代码以及使用 Mermaid 绘制的流程图，展示了从单文件 HTML 预览、组件级 Blob URL 预览到完整项目 WebContainer 预览的全流程。借助这些方案，开发者可在不同开发阶段选择最合适的方式，实现从需求描述、代码生成到实时预览的无缝对接，显著提升开发效率。

[!success] 核心要点

• 方案一（HTML+srcdoc+iframe）：最简单直接，单文件 HTML 赋值给 srcdoc 即预览，适合 landing page、小游戏等快速验证
• 方案二（React/Vue+Blob+iframe）：Babel/VueCompiler 转换组件后嵌入模板，用 URL.createObjectURL 生成 Blob URL 预览，实现"边写边预览"
• 方案三（WebContainer）：浏览器内运行最小化 Vite 项目，自动安装依赖并启动预览服务，支持完整项目前后端联调
• 选型路径：初期用方案一/二快速验证，后期引入 WebContainer 构建完整项目环境；三种方案可按需灵活组合