前端开发提效神器：Open-Lovable 克隆网页 + cpolar 远程访问太香了

Open-Lovable 作为一款开源的前端工具，核心能力是通过 AI 对话快速生成完整的 React 应用，最实用的功能就是网页克隆 —— 输入目标网址、选择合适的 AI 模型，就能自动生成结构清晰的 React 代码，还集成了 E2B 沙箱和 Firecrawl 抓取引擎，能完整保留网页的样式和布局逻辑。

从使用者的角度来说，这款工具的优势特别贴合实际开发需求：新手学习时，克隆后的代码拆分了 header、footer 等独立组件，注释清晰，能快速理解优秀网站的结构；职场中做产品原型时，克隆同类网页后稍作修改，就能把原本几天的开发工作量压缩到几小时，大大节省了时间和精力，而且开源免费的特性，对个人开发者和中小团队都很友好。

在没有用 cpolar 之前，Open-Lovable 只能在局域网内使用，每次需要和异地同事同步克隆效果，都要反复传文件、远程协助，效率极低。而用上 cpolar 后，只需简单配置隧道，就能生成公网访问地址，彻底摆脱了局域网的束缚：设计师在咖啡厅改完图，能实时通过公网链接查看前端克隆的效果；前端在家办公，也能和公司的团队成员同步调试代码；甚至出差时，只要能上网，就能随时随地访问本地的 Open-Lovable 修改代码，不管是临时调整克隆的网页样式，还是给客户演示效果，都变得格外便捷。

一件轻松搞定的美妙“魔法”已经在下面为您准备完毕，快去体验吧！

1 关于【Open-Lovable】：不只是克隆那么简单

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

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

2 windows部署安装Open-Lovable

前提要求！需要有git，node.js，还有vscode！

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

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

接着进入到项目里

cdopen-lovable

下一步是安装项目依赖，正常官方是用npm来安装，

但是我用npm失败了，所以我这里使用pnpm来安装，没有pnpm的可以使用这行命令安装一下。

npminstall-gpnpm

接着我们来用pnpm安装，过程可能会需要几分钟，取决于你的网络情况。

pnpminstall

完成后我们打开vscode，打开open-lovable的文件夹，找到这个env.example打开，全选复制里面的内容

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

第一个是需要E2B的api秘钥，它是一个沙盒，来提供隔离的代码执行环境，

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

这两个是必须有的，大家可以去他们的官网领取一个免费的api秘钥

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

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

pnpmrun dev

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

3 简单使用open-lovable

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

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

大家看它开始疯狂工作了！它正在分析页面结构，抓取样式，理解布局……

这个过程就像一个绝世画师在临摹一幅传世名画，只不过我们的画师画得更快，更准！

家人们，请看！一个几乎一模一样的firecrawl首页，就这样被我们克隆出来了！

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

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

这要是让我自己手写，我这辈子都搞不定！现在，只需要几秒钟！这就是科技的力量啊！

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

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

完成后在vscode当中打开这个文件夹，就能看到这个网页生成的代码了。

里边有各种各样的组件，footer、header等等。

HTML结构、CSS样式，全都有！它甚至把组件都给你拆分好了，这结构，清晰得就像我梳理好的代码逻辑一样！太优雅了！

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

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

pnpminstall

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

pnpmrun dev

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

4 介绍以及安装cpolar

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

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

访问cpolar官网： https://www.cpolar.com 点击免费使用注册一个账号，并下载最新版本的cpolar。

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

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

5 使用cpolar配置open-lovable固定公网地址

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

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

点击创建：

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

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

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

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

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

点击高级，在这个auth里面直接填写你想要的用户名，冒号后面写密码，可以按照我这个格式直接抄哈。

点击更新，完成后我们再去在线隧道列表打开新链接，

能看到我们为这个网址成功创建了一个用户名和密码，这样只有我们自己能登录进去，安全多了！

结尾

这就是Cpolar的魔力！从一个本地项目，到全球可访问的网站，我们只用了几分钟！Open-Lovable负责‘创造’，Cpolar负责‘发布’，它们俩简直是天作之合，强强联手！

好啦，今天的分享就到这里！从用Open-Lovable一键克隆任何你心仪的网站，再到用Cpolar把它发布到互联网上，让全世界都能看到你的作品，这一整套‘骚操作’，你学会了吗？是不是感觉自己瞬间从一个代码小白，进阶成了可以‘偷天换日’的黑科技大佬？

Open-Lovable 解决了前端克隆网页的效率问题，cpolar 则补齐了远程访问的短板，让这款工具的实用性进一步提升。对于前端开发者来说，这样的组合能让工作更灵活，也让协作变得更顺畅。

这就是开源工具和实用软件带给我们的魅力！

以上就是如何在本地windows系统快速部署Open-Lovable，并安装cpolar内网穿透工具配置固定不变的二级子域名公网地址，实现随时随地远程访问的全过程，感谢您的观看，有任何问题欢迎留言交流。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站