Open-Lovable 网页克隆实战：结合 cpolar 实现远程协作

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

接着进入项目目录：

cd open-lovable 

下一步是安装项目依赖。官方推荐 npm，但有时会遇到网络问题，这里建议使用 pnpm。如果没有安装 pnpm，可以先执行以下命令：

npm install -g pnpm

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

pnpm install

完成后打开 VSCode，找到 env.example 文件，全选复制内容：

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

环境变量中第一个是 E2B 的 API 秘钥，它是一个沙盒，提供隔离的代码执行环境：

第二个是 Firecrawl 的 API 秘钥，这是一款 AI 网络爬虫工具，可以高效地自动抓取网站内容：

这两个是必须的，可以去官网领取免费密钥。下面四个 AI 模型任选其一即可，这些密钥用于后续操作时安全执行代码、抓取网页和调用 AI 接口。我这里是填写了最后一个 Groq 的 API 秘钥，免费领取时通常需要自备网络代理环境。

Ctrl+S 保存后，回到终端启动开发服务器：

pnpm run dev 

打开浏览器访问 localhost:3000，就能看到 Open-Lovable 的页面，界面简洁美观：

简单使用 Open-Lovable

我们来试试克隆 Firecrawl 官网首页！复制链接。

粘贴到输入框，选择刚才填写的 AI 模型，点击开始：

可以看到它开始分析页面结构，抓取样式，理解布局……这个过程就像一位画师在临摹作品，只不过速度更快、更精准。

大家看，一个几乎一模一样的 Firecrawl 首页就这样被克隆出来了！

虽然部分动态效果和登录信息没有，但整个静态布局和样式已经完美复刻。

点击右上角图标，可以看到刚才在沙盒当中克隆的站点。

手动编写这些组件通常需要大量时间，现在只需要几秒钟，这就是技术带来的效率提升。

接着点击下载，稍等一会就可以把生成的项目代码下载到本地。

解压压缩包，在 VSCode 中打开文件夹，就能看到网页生成的代码。里边有各种各样的组件，footer、header 等等。

HTML 结构、CSS 样式全都有，甚至把组件都拆分好了，结构清晰优雅。

接下来在本地运行一下，在 VSCode 打开终端，安装依赖：

pnpm install

然后输入命令启动项目：

pnpm run dev 

启动完成后会生成带端口的地址，打开浏览器粘贴该地址，能看到成功访问了刚才克隆的站点。

介绍及安装 cpolar

目前我们只能在本地局域网内访问刚刚部署的 Open-Lovable。如果想在外部网络环境使用手机、平板、电脑等设备远程访问，可以使用 cpolar 内网穿透工具。无需公网 IP，也不用准备云服务器那么麻烦。

cpolar 是一款支持 TCP/UDP 协议的内网穿透工具，可以帮助你轻松将本地服务发布到互联网上。无论是开发调试、团队协作还是远程办公，cpolar 都能为你提供稳定的网络连接。

访问 cpolar 官网注册账号并下载最新版本。本教程以 Windows 版本为例。

登录成功后，下载 Cpolar 到本地并安装（一路默认安装即可）。

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

配置 Open-Lovable 固定公网地址

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

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

点击创建：

创建成功后，打开左侧在线隧道列表，可以看到刚刚通过创建隧道生成了两个公网地址，接下来就可以在其他电脑或者移动端设备上，使用任意一个地址在浏览器中访问。

现在我们任意打开一个链接，都能完美访问。

但是会发现 Open-Lovable 是不自带登录验证的，导致现在任何人都能在公网上访问自己的 Open-Lovable，存在安全隐患。谁都能用我们的 API 秘钥了，资源都被浪费了。别担心，cpolar 还有设置密码验证功能。

回到 cpolar 隧道列表，找到需要修改的隧道点击编辑：

点击高级，在 auth 里面直接填写你想要的用户名，冒号后面写密码，格式如下：

点击更新，完成后去在线隧道列表打开新链接，能看到我们为这个网址成功创建了用户名和密码，这样只有自己能登录进去，安全多了。

总结

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