AI 生成代码实时预览方案

项目实操2025-06-02 网络

AI 生成代码实时预览方案

一、 html + srcdoc + iframe\n1. AI 生成可以通过浏览器直接打开的 html 文件（单文件，html/css/js 写到一起）\n2. 通过 iframe 的 srcdoc 传入 html 源码预览\n3. 通过 importmap 指定依赖包的 CDN 资源。\n这种方案实现起来简单，预览效率高。\n \n二、react/vue + blob + iframe\n1. AI 生成 react / vue 组件代码（单文件组件，无本地 import 依赖）\n2. 通过 Babel.transform 转换 react 组件/通过 VueCompiler 编译 vue 组件\n3. 使用转换/编译后的组件，构建一个 html 文件\n4. 使用 blob 构建预览 url，传入 iframe.src 预览\n这种方案稍微复杂一些，适合 react / vue 单文件组件预览。\n \n三、webcontainer\n1. AI 生成组件代码（可以返回多个组件文件，组件可以互相 import）\n2. 构建一个最小可运行的 vite 项目骨架，把 vite 骨架包含的文件和 AI 生成的组件打包在一起，构建一个文件树\n3. 启动 webcontainer 容器，挂载文件树\n4. 通过 webcontainer 执行终端命令，安装项目依赖\n5. 通过 webcontainer 启动预览服务，得到预览地址\n6. 把预览地址传入 webcontainer 容器外的 iframe.src 实现项目预览\n这种方案依赖 webcontainer，可以实现多组件预览，灵活性更高，但是涉及到文件挂载，命令行安装依赖等步骤，预览速度会慢一些。\n \n方案一适合用户不关心代码，只想快点看到效果的场景，比如用 Pagen 一句话生成 landing page，页面内容都在一个 html 文件里面。\n \n方案二适合辅助前端写组件场景。比如用 CopyWeb 截图复刻设计，生成单个 react 组件，在线预览效果，导出到本地项目使用。\n \n方案三适合一句话生成完整项目场景，比如用 bolt/v0 一句话生成 nextjs 项目骨架，可在线预览，可导出 zip 到本地修改。\n \n#全栈开发 #AI #CopyWeb #AI编程