跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.jsAI大前端

Open-Lovable 网页克隆实战与 cpolar 远程访问配置

Open-Lovable 可将任意网页快速克隆为可编辑的 React 应用,支持多类 AI 模型辅助生成代码。本文详解在 Windows 环境下部署 Open-Lovable 的步骤,包括依赖安装与环境变量配置。同时结合 cpolar 内网穿透工具,无需公网 IP 即可实现异地远程访问与团队协作,并配置安全验证保障 API 密钥安全,有效提升前端原型开发与调试效率。

极客零度发布于 2026/3/23更新于 2026/9/1153 浏览
Open-Lovable 网页克隆实战与 cpolar 远程访问配置

Open-Lovable 网页克隆实战与 cpolar 远程访问配置

Open-Lovable 是一款面向前端开发者的开源工具,核心功能是将任意网页克隆为可编辑的 React 应用。它支持多类 AI 模型辅助生成代码,适配新手学习、中小企业原型开发等场景。

Open-Lovable 主界面

它的优势在于拆分代码组件清晰,保留完整 CSS 样式,能大幅减少手动搭建页面框架的时间。比如新手学习电商网站布局时,不用再逐行拆解复杂的源代码,直接克隆后就能看清 header、footer 等组件的逻辑;中小企业做产品原型时,克隆同类网页后稍作修改就能快速出效果。

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

API 密钥配置界面

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

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

cpolar 隧道管理界面

工具概览

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

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

Windows 本地部署

前提要求:需要有 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 的文件,把刚才复制的内容粘贴进去。

这里主要涉及两类密钥:

  1. E2B API 密钥:它是一个沙盒,用来提供隔离的代码执行环境。
  2. Firecrawl API 密钥:一款 AI 网络爬虫工具,可以高效地自动抓取网站内容。

这两个是必须有的,大家可以去他们的官网领取免费的 API 密钥。

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

保存文件后,回到终端启动开发服务器:

pnpm run dev 

打开浏览器访问 localhost:3000,就能看到 Open-Lovable 的页面了。

本地运行效果

功能演示

我们来试试克隆 Firecrawl 官网首页!复制链接,粘贴到输入框中,选择好刚才填写的 AI 模型,开始生成。

克隆过程

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

克隆完成效果

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

点击右上角图标,可以看到刚才在沙盒当中克隆的站点。这要是让我自己手写,耗时且易错,现在只需要几秒钟,这就是科技的力量。

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

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

生成的代码结构

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

到时候你就可以自己在里面修修改改,形成自己的项目了。接下来我们试试在本地运行一下,在 VSCode 打开终端,安装依赖:

pnpm install

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

pnpm run dev 

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

克隆站点本地预览

远程访问配置

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

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

访问 cpolar 官网注册一个账号,并下载最新版本的 cpolar。本教程选择下载 Windows 版本。

cpolar 下载页面

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

创建隧道

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

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

点击创建。

隧道创建配置

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

隧道列表

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

远程访问测试

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

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

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

安全认证配置

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

安全访问效果

总结

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

cpolar 官网 - 安全的内网穿透工具 | 无需公网 ip | 远程访问 | 搭建网站

目录

  1. Open-Lovable 网页克隆实战与 cpolar 远程访问配置
  2. 工具概览
  3. Windows 本地部署
  4. 功能演示
  5. 远程访问配置
  6. 创建隧道
  7. 总结

更多推荐文章

查看全部
  • 2020 年 CSP-S 提高组初赛真题解析:阅读程序第 1 题
  • Windows 系统下使用 Git 从 GitHub 拉取项目到本地
  • GitHub 项目上传完整指南
  • Prompt 工程通用框架及案例:模型智能决定上限
  • 基于 Spring Boot 的智驿 AI 系统毕业设计项目详解
  • Whisper 语音识别模型版本详解与官方下载链接
  • 无人机视角山区泥石流与滑坡图像识别数据集
  • NestJS 核心揭秘:InstanceWrapper 的艺术与前端缓存新思路
  • Python 核心语法详解
  • 大模型开发框架 LangChain 入门与实战
  • Stable Diffusion WebUI 本地部署完整教程
  • Python 开发必备十大工具:从 IDE 到数据分析库详解
  • Retinaface+CurricularFace 在 Jetson Orin 上的部署与优化实践
  • Linux 线程控制核心指南:创建、终止与资源管理
  • 主流 AI 大模型集合与功能介绍
  • 解析 skill-creator:如何编写高质量 AI Skill
  • C语言运算符优先级与结合性详解
  • Java SE 文件 IO 基础入门
  • AI 智能体框架 OpenClaw 技术解析:从对话到执行
  • Floweb 超轻量级浮动浏览器功能解析

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online