Open-Lovable 网页克隆工具本地部署与远程访问方案

git clone https://github.com/mendableai/open-lovable.git 

进入项目目录：

cd open-lovable 

安装项目依赖。官方推荐使用 npm，但建议使用 pnpm 以获得更好的性能。若未安装 pnpm，可使用以下命令：

npm install -g pnpm

接着使用 pnpm 安装依赖，过程可能需要几分钟，取决于网络情况：

pnpm install

完成后打开 VSCode，加载 open-lovable 文件夹，找到 .env.example 文件，全选复制内容。

新建一个名为 .env.local 的文件，将刚才复制的内容粘贴进去。

环境变量配置说明：

1. E2B API 密钥：提供隔离的代码执行环境。
2. Firecrawl API 密钥：AI 网络爬虫工具，用于高效自动抓取网站内容。

这两个是必填项，可从官网领取免费密钥。下方四个 AI 模型任选其一即可，用于后续安全执行代码、抓取网页和调用 AI 接口。示例中填写了 Groq 的 API 密钥。

保存文件后，回到终端启动开发服务器：

pnpm run dev 

浏览器访问 localhost:3000，即可看到 Open-Lovable 的界面。

简单使用 Open-Lovable

尝试克隆 Firecrawl 官网首页，复制链接并粘贴到输入框，选择已配置的 AI 模型开始生成。

系统开始分析页面结构、抓取样式、理解布局。这个过程类似于临摹，但速度更快、更精准。

最终生成的首页几乎与原站一致，虽然部分动态效果和登录信息缺失，但静态布局和样式已完美复刻。

点击右上角图标可查看沙盒中克隆的站点。

相比手动编写，这种方式效率极高。点击下载按钮，稍等片刻即可将生成的项目代码下载到本地。

解压压缩包，在 VSCode 中打开文件夹，即可查看生成的网页代码。包含 HTML 结构、CSS 样式及拆分好的组件（如 footer、header），结构清晰。

可在本地运行测试。在 VSCode 终端安装依赖：

pnpm install

启动项目：

pnpm run dev 

启动成功后会生成端口地址，浏览器访问即可看到克隆的站点。

介绍及安装 cpolar

目前只能在本地局域网访问 Open-Lovable。若想在外部网络环境使用手机、平板等设备远程访问，可使用 cpolar 内网穿透工具。无需公网 IP，也不用准备云服务器。

cpolar 是一款支持 TCP/UDP 协议的内网穿透工具，可将本地服务发布到互联网上。访问官网注册账号并下载最新版本。

登录成功后，下载 Cpolar 到本地并安装（一路默认安装即可）。本教程以 Windows 版本为例。

安装成功后，在浏览器访问 localhost:9200，使用 cpolar 账号登录，进入 Web 配置界面。

配置 Open-Lovable 固定公网地址

登录 cpolar Web UI 管理界面，点击左侧仪表盘的隧道管理——创建隧道：

• 隧道名称：自定义，例如 myclone，注意不要与已有隧道重复
• 协议：http
• 本地地址：3000
• 域名类型：随机域名
• 地区：China Top

点击创建。

创建成功后，在线隧道列表会显示生成的两个公网地址。在其他电脑或移动端设备上，使用任意一个地址在浏览器中访问即可。

此时任意打开一个链接都能完美访问。

需要注意的是，Open-Lovable 本身不带登录验证，公网上任何人都可能访问，存在 API 密钥泄露风险。建议开启密码验证。

回到 cpolar 隧道列表，找到对应隧道点击编辑。

点击高级选项，在 auth 字段填写用户名和密码，格式为 username:password。

点击更新。再次打开在线隧道列表中的新链接，会提示输入用户名和密码，确保只有授权人员能访问。

总结

Open-Lovable 凭借网页克隆为 React 应用的核心能力，解决了前端开发中手动搭建页面耗时、新手学习代码结构难的问题。cpolar 内网穿透则弥补了其仅能局域网使用的短板，通过简单配置实现远程访问，并保障使用安全。两者结合让前端开发的协作效率和使用灵活性得到提升，贴合实际工作中的各类场景需求。