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 栏中填写用户名和密码，格式为 。更新后，访问公网链接时会弹出登录框，只有授权人员才能进入，有效防止资源被滥用。
