Open-Lovable 让你秒变前端大神!cpolar 内网穿透实验室第 591 个成功挑战

63 阅读10分钟

NO.591 Open-Lovable-01.png 软件名称:Open-Lovable

操作系统支持:支持 Windows 系统(文中主要介绍 Windows 部署流程)

软件介绍:Open-Lovable 是由 MendableAI 团队开发的开源神器,能通过 AI 对话快速生成完整 React 应用。它就像个会读心术的前端大师,既能把任意网页克隆成可编辑的 React 项目,还支持 Anthropic Claude、OpenAI GPT-5 等多种 AI 模型,搭配 E2B 沙箱和 Firecrawl 抓取引擎,让网页克隆从 "愚公移山" 变成 "一键瞬移"。

NO.591 Open-Lovable-02-1.png

Open-Lovable 的出色功能

它最牛的本事就是 "网页克隆术"—— 不管是复杂的电商首页还是炫酷的交互网站,输入网址、选好 AI 模型,喝口水的功夫就能生成结构清晰的 React 代码。组件自动拆分、CSS 样式完整保留,甚至连页面布局逻辑都给你梳理得明明白白,比设计师的原稿还贴心。更绝的是支持多种 AI 模型切换,想让克隆效果更贴合需求?换个模型分分钟搞定。

NO.591 Open-Lovable-03.png

实用场景

  • 痛点:新手开发者想学习优秀网站的代码结构,却只能对着网页源代码一脸懵,各种嵌套层级看得头晕眼花。爽点:用 Open-Lovable 克隆后,代码被拆分成 header、footer 等独立组件,注释清晰得像带了教学手册,边看边学效率翻倍。
  • 痛点:创业团队要做产品原型,设计师出图后前端得花几天搭框架,赶进度时天天加班。爽点:克隆同类产品网页后,直接在生成的代码上改内容,原本 3 天的活 2 小时搞定,团队准时下班去撸串。

NO.591 Open-Lovable-04.png

cpolar 内网穿透技术带来的便利

原本 Open-Lovable 只能在自己电脑上用,想让异地的同事看看克隆效果?得传文件、远程协助,折腾半小时还可能出错。用 cpolar 后,不用公网 IP,也不用买服务器,设置个隧道就能生成公网地址,把链接甩给同事,手机、电脑、平板点开就能看,就像把本地项目搬到了互联网上。

更贴心的是能加密码保护,别人点开链接得输账号密码才能用,再也不怕自己的 API 密钥被陌生人盗用。团队协作时,设计师在咖啡馆改图,前端在家调代码,通过 cpolar 链接实时同步效果,比在同一个办公室还方便。出差时突然要改克隆的网站?只要能上网,在哪都能访问本地的 Open-Lovable,就像把工作台揣在了口袋里。

NO.591 Open-Lovable-05.png

总结

Open-Lovable 是前端开发者的 "抄作业神器",把网页克隆从苦力活变成了轻松事;而 cpolar 则是 "传送门制造机",让本地工具突破局域网限制,随时随地都能用。两者搭配就像外卖加了准时达服务 —— 不仅能快速拿到想要的(克隆代码),还能在任何地方轻松获取(远程访问),简直是效率提升的黄金组合。

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

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

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

image-20250902104206581

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

2 windows部署安装Open-Lovable

前提要求!需要有git,node.js,还有vscode!

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

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

image-20250902104425390

接着进入到项目里

cd open-lovable

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

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

npm install -g pnpm

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

pnpm install

image-20250902104444926

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

image-20250902104505363

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

image-20250902104523347

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

image-20250902104533435

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

image-20250902104539541

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

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

image-20250902104557978

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

pnpm run dev

image-20250902104631346

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

image-20250902104643710

3 简单使用open-lovable

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

image-20250902104702227

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

image-20250902104716731

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

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

image-20250902104733137

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

image-20250902104805315

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

image-20250902104816716

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

image-20250902104836909

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

image-20250902104846090

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

image-20250902104904459

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

image-20250902104929875

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

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

image-20250902104956041

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

image-20250902105015486

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

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

pnpm install

image-20250902105119488

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

pnpm run dev

image-20250902105129053

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

image-20250902105143741

4 介绍以及安装cpolar

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

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

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

img

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

image-20240319175308664

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

img

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

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

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

点击创建:

image-20250902105916959

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

image-20250902112300841

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

image-20250902112551675

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

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

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

image-20250902112717462

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

image-20250902112752193

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

image-20250902112813520

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

image-20250902112825742

结尾

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

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

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

最后,留给大家一个互动话题:如果让你用Open-Lovable克隆一个网站,你最想克隆哪一个呢?为什么?把你的答案打在评论区,让我们看看谁的想法最有趣!

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