Open-Lovable 是一款面向前端开发者的开源工具核心功能是将任意网页快速克隆为可编辑的 React 应用还支持 Anthropic Claude、OpenAI GPT-5 等多款 AI 模型能自动拆分组件、保留完整 CSS 样式不管是新手学习优秀网站结构还是创业团队快速搭建产品原型都能大幅降低开发成本优点在于操作简单、代码结构清晰且开源免费适配 Windows 系统对中小团队和个人开发者十分友好。使用这款工具时发现虽然克隆网页的效率很高但需要提前准备好 E2B、Firecrawl 等平台的 API 密钥且不同 AI 模型生成的代码细节有差异建议根据实际需求选择适配的模型初次使用时最好先克隆简单的静态网页熟悉流程避免因复杂页面的动态效果缺失影响使用体验。。不过 Open-Lovable 默认只能在本地局域网内使用这带来了不少不便比如异地协作时设计师想查看克隆的页面效果需要前端开发者手动传输文件不仅耗时还可能出现版本不一致的问题出差在外想修改克隆的代码也只能等回到本地电脑无法及时响应需求。而将 Open-Lovable 与 cpolar 内网穿透工具结合后这些问题都能迎刃而解。无需公网 IP 和服务器只需简单配置隧道就能生成公网访问地址异地的同事可直接通过链接查看效果还能给链接设置密码保护防止 API 密钥被盗用既保障了安全性又让本地工具突破了局域网的限制随时随地都能访问和使用。一件轻松搞定的美妙“魔法”已经在下面为您准备完毕快去体验吧1 关于【Open-Lovable】不只是克隆那么简单Open Lovable是由 MendableAI 团队开发的一个开源项目。这款神器最吸引人的地方在于你只需与 AI 对话就能快速生成一个完整的 React 应用。无论是学习、原型设计还是实际项目开发Open Lovable都能轻松应对。核心功能将任意网页克隆为 React 应用支持多种 AI 模型如 Anthropic Claude、OpenAI GPT-5集成 E2B 沙箱与 Firecrawl 抓取引擎特点自然语言生成网页克隆灵活模型选择安全环境开源免费MIT 许可证2 windows部署安装Open-Lovable前提要求需要有gitnode.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秘钥这里免费领取秘钥的时候需要自备魔法环境哦ctrlS保存下来回到刚才的终端上来启动开发服务器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里面直接填写你想要的用户名冒号后面写密码可以按照我这个格式直接抄哈。点击更新完成后我们再去在线隧道列表打开新链接能看到我们为这个网址成功创建了一个用户名和密码这样只有我们自己能登录进去安全多了结尾Open-Lovable 凭借便捷的网页克隆能力提升前端开发效率cpolar 则解决了其局域网使用的局限二者结合让开发协作更灵活。日常使用中根据需求调整配置就能充分发挥工具价值适合各类前端开发场景的实际需求。以上就是如何在本地windows系统快速部署Open-Lovable并安装cpolar内网穿透工具配置固定不变的二级子域名公网地址实现随时随地远程访问的全过程感谢您的观看有任何问题欢迎留言交流。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站