Open-Lovable 简介
Open-Lovable 是 MendableAI 推出的开源工具,核心功能是将任意网页克隆为可编辑的 React 应用。它支持多种 AI 模型辅助生成代码,能自动拆分组件并保留完整 CSS 样式,非常适合新手学习布局或中小企业快速构建原型。
不过,Open-Lovable 默认只能在本地局域网内使用。这意味着开发者在家调试的项目,想让公司的设计师远程查看效果,只能通过传文件或远程协助,不仅耗时还容易出现版本不一致的问题。将 Open-Lovable 与 cpolar 内网穿透工具结合后,无需公网 IP 和云服务器,即可生成公网访问地址,实现异地同事直接访问、实时协作,同时还能设置账号密码保护,保障 API 密钥安全。
本地环境部署
首先确保本地已安装 Git、Node.js 和 VSCode。
-
克隆仓库
git clone https://github.com/mendableai/open-lovable.git cd open-lovable -
安装依赖 官方推荐使用 npm,但 pnpm 在性能上表现更优。若未安装 pnpm,可先执行:
npm install -g pnpm随后安装项目依赖(过程视网络情况可能需要几分钟):
pnpm install -
配置环境变量 打开
env.example文件,全选复制内容,新建env.local文件并粘贴进去。需要填写的密钥包括:- E2B API Key:提供隔离的代码执行沙箱环境。
- Firecrawl API Key:用于高效抓取网站内容。
- AI 模型密钥:如 Groq 等,用于调用接口。注意保管好密钥,避免外泄。
-
启动服务 保存配置文件后,回到终端运行:
pnpm run dev浏览器访问 localhost:3000,即可进入 Open-Lovable 界面。
功能演示
在输入框中粘贴目标网址,选择已配置的 AI 模型开始克隆。系统会自动分析页面结构、抓取样式并生成代码。完成后点击下载,将生成的项目压缩包解压到本地。
在 VSCode 中打开该文件夹,可以看到清晰的组件结构(header、footer 等)。HTML 结构与 CSS 样式均已生成,甚至组件拆分逻辑都非常优雅。此时可以再次运行 pnpm install 和 pnpm run dev 在本地预览克隆后的站点效果。
远程访问配置
为了突破局域网限制,我们需要使用 cpolar 内网穿透工具。
-
安装与登录 访问 cpolar 官网注册账号,下载并安装客户端。安装完成后,在浏览器访问 localhost:9200,使用账号登录 Web 管理界面。
-
创建隧道 点击左侧隧道管理中的'创建隧道':
- 隧道名称:自定义(例如 myclone),避免重复。
- 协议:http。
- 本地地址:3000(对应 Open-Lovable 端口)。
- 域名类型:随机域名。
- 地区:China Top。
创建成功后,在线隧道列表会显示生成的公网地址。异地设备通过浏览器访问该链接,即可看到本地运行的 Open-Lovable。
安全加固
由于 Open-Lovable 本身不带登录验证,直接暴露存在安全风险。建议在 cpolar 隧道的高级设置中添加 HTTP 认证。
找到需要修改的隧道点击编辑,在高级选项的 auth 栏中填写用户名和密码,格式为 。更新后,访问公网链接时会弹出登录框,只有授权人员才能进入,有效防止资源被滥用。


