结合 cpolar 内网穿透远程部署 Open-Lovable 网页克隆工具

结合 cpolar 内网穿透远程部署 Open-Lovable 网页克隆工具

Open-Lovable 是一款面向前端开发者的开源工具，核心功能是将任意网页克隆为可编辑的 React 应用。它支持多类 AI 模型辅助生成代码，适配新手学习、中小企业原型开发等场景。其优点很贴合实际需求：拆分代码组件清晰，保留完整 CSS 样式，能大幅减少手动搭建页面框架的时间。

使用这款工具时也有一些实用的小提醒：克隆的网页仅能还原静态布局和样式，像登录态、动态交互这类内容无法完整复刻，而且使用前需要准备好 E2B、Firecrawl 等平台的 API 密钥，密钥保管要注意隐私，避免外泄造成不必要的损失。

不过 Open-Lovable 默认只能在本地局域网内使用，这会带来不少不便。比如开发者在家调试的克隆项目，想让公司的设计师远程查看效果，只能通过传文件、远程协助的方式，不仅耗时，还可能出现版本不一致的问题；要是出差在外需要修改克隆的代码，没法直接访问本地的工具，只能等回到电脑前操作，耽误工作进度。

而将 Open-Lovable 与 cpolar 内网穿透工具结合后，这些问题就能迎刃而解。无需公网 IP 和云服务器，只需简单配置就能生成公网访问地址，异地的同事直接点开链接就能查看克隆效果，还能给链接设置账号密码保护，既保障了 API 密钥的安全，又能实现团队实时协作，哪怕在咖啡馆、高铁站等场景，只要能上网就能访问本地的 Open-Lovable，灵活度大幅提升。

1. 关于 Open-Lovable

Open Lovable 是由 MendableAI 团队开发的一个开源项目。这款工具最吸引人的地方在于，你只需与 AI 对话，就能快速生成一个完整的 React 应用。无论是学习、原型设计还是实际项目开发，Open Lovable 都能轻松应对。

• 核心功能
  • 将任意网页克隆为 React 应用
  • 支持多种 AI 模型（如 Anthropic Claude、OpenAI GPT-5）
  • 集成 E2B 沙箱与 Firecrawl 抓取引擎
• 特点
  • 自然语言生成
  • 网页克隆
  • 灵活模型选择
  • 安全环境
  • 开源免费，MIT 许可证

2. 本地环境部署

前提要求：需要有 git、node.js 以及 vscode。

我们首先打开终端把仓库克隆下来：

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 的文件，把刚才复制的内容粘贴进去。

其中第一个是需要 E2B 的 API 秘钥，它是一个沙盒，用来提供隔离的代码执行环境。 第二个是 Firecrawl 的 API 秘钥，它是一款 AI 网络爬虫工具，可以高效地自动抓取网站内容。 这两个是必须有的，大家可以去他们的官网领取免费的 API 秘钥。

下面四个 AI 模型任选其一就行，这些密钥用于后面操作的时候安全执行代码、抓取网页和调用 AI 接口。我这里是填写了最后一个 Groq 的 API 秘钥，这里免费领取秘钥的时候需要自备魔法环境哦。

Ctrl+S 保存下来，回到刚才的终端上来启动开发服务器：

pnpm run dev 

打开浏览器访问 localhost:3000，就能看到我们进入到 open-lovable 的页面啦！是不是非常简洁美观？

3. 简单使用 Open-Lovable

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

粘贴，选择好你刚才填写的 AI 模型，开始！

大家看它开始疯狂工作了！它正在分析页面结构，抓取样式，理解布局……这个过程就像一个绝世画师在临摹一幅传世名画，只不过我们的画师画得更快，更准！

家人们，请看！一个几乎一模一样的 firecrawl 首页，就这样被我们克隆出来了！虽然有些动态效果和登录信息没有，但整个静态布局和样式已经完美复刻！

点击右上角这个图标，我们就可以看到刚才在沙盒当中克隆的站点了。这要是让我自己手写，我这辈子都搞不定！现在，只需要几秒钟！这就是科技的力量啊！

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

然后我们打开文件夹，找到刚才下载的压缩包，解压。

完成后在 vscode 当中打开这个文件夹，就能看到这个网页生成的代码了。里边有各种各样的组件，footer、header 等等。HTML 结构、CSS 样式，全都有！它甚至把组件都给你拆分好了，这结构，清晰得就像我梳理好的代码逻辑一样！太优雅了！

到时候你就可以自己在里面修修改改，形成自己的项目了。

接下来我们试试在本地运行一下，接着我们在 vscode 打开终端，安装依赖：

pnpm install

然后输入这行命令来启动项目：

pnpm run dev 

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

4. 介绍及安装 cpolar

不过我们目前只能在本地局域网内访问刚刚部署的 open-lovable，如果想不在同一局域网内时，也能在外部网络环境使用手机、平板、电脑等设备远程访问与使用它，应该怎么办呢？我们可以使用 cpolar 内网穿透工具来实现远程访问的需求。无需公网 IP，也不用准备云服务器那么麻烦。

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

访问 cpolar 官网注册一个账号，并下载最新版本的 cpolar。本教程选择下载 Windows 版本，一路默认安装即可。

cpolar 安装成功后，在浏览器上访问 localhost:9200，使用 cpolar 账号登录，登录后即可看到 Cpolar web 配置界面，接下来在 web 管理界面配置即可。

5. 配置固定公网地址

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

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

点击创建。

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

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

但是我们会发现，Open-lovable 是不自带登录验证的，导致现在任何人都能在公网上访问我们自己的 Open-lovable。这也太没安全感了，谁都能用我们的 api 秘钥了，资源都被浪费了。这怎么办呢？

别担心，cpolar 还有设置密码验证功能，这样你就不必担心自己的 api 秘钥泄漏了！

回到 cpolar 隧道列表，找到需要修改的隧道点击编辑，点击高级，在这个 auth 里面直接填写你想要的用户名，冒号后面写密码，格式如下：

username:password

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

结尾

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