Open-Lovable 网页克隆与远程访问配置
Open-Lovable 是一款面向前端开发者的开源工具，核心功能是将任意网页克隆为可编辑的 React 应用，支持多类 AI 模型辅助生成代码。其优点包括拆分代码组件清晰、保留完整 CSS 样式，能大幅减少手动搭建页面框架的时间。
使用这款工具时需注意：克隆的网页仅能还原静态布局和样式，像登录态、动态交互这类内容无法完整复刻。使用前需要准备好 E2B、Firecrawl 等平台的 API 密钥，密钥保管要注意隐私。
不过 Open-Lovable 默认只能在本地局域网内使用，这会给远程协作带来不便。将 Open-Lovable 与 cpolar 内网穿透工具结合后，无需公网 IP 和云服务器，只需简单配置就能生成公网访问地址，实现异地同事查看效果或远程修改代码。
1. 关于 Open-Lovable
Open Lovable 是由 MendableAI 团队开发的开源项目。你只需与 AI 对话，就能快速生成一个完整的 React 应用。
- 核心功能：
- 将任意网页克隆为 React 应用
- 支持多种 AI 模型（如 Anthropic Claude、OpenAI GPT）
- 集成 E2B 沙箱与 Firecrawl 抓取引擎
- 特点：
- 自然语言生成
- 网页克隆
- 灵活模型选择
- 安全环境
- 开源免费，MIT 许可证
2. Windows 部署安装 Open-Lovable
前提要求：需要有 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_KEY：沙盒环境密钥，提供隔离的代码执行环境。FIRECRAWL_API_KEY：AI 网络爬虫工具密钥，用于高效自动抓取网站内容。- 下方四个 AI 模型密钥任选其一，用于后续操作时安全执行代码、抓取网页和调用 AI 接口。
保存文件后，回到终端启动开发服务器：
pnpm run dev
打开浏览器访问 localhost:3000，即可进入 Open-Lovable 页面。
3. 简单使用 Open-Lovable
尝试克隆目标网页首页，复制链接并粘贴到工具中，选择已填写的 AI 模型开始生成。
工具会分析页面结构，抓取样式，理解布局。完成后，点击右上角图标可以看到在沙盒当中克隆的站点。
点击下载，稍等一会就可以把生成好的项目代码下载到本地。解压后在 VSCode 当中打开这个文件夹，即可查看生成的 HTML 结构、CSS 样式及拆分好的组件。
在本地运行生成的项目，在 VSCode 打开终端安装依赖：
pnpm install
然后输入命令启动项目：
pnpm run dev
启动完成后会生成带端口的地址，打开浏览器访问即可看到克隆的站点。
4. 介绍及安装 cpolar
目前只能在本地局域网内访问刚刚部署的 Open-Lovable，如果想在外部网络环境使用手机、平板、电脑等设备远程访问，可以使用 cpolar 内网穿透工具。
cpolar 是一款支持 TCP/UDP 协议的内网穿透工具，可以帮助你轻松将本地服务发布到互联网上。
注册账号并下载最新版本的 cpolar 进行安装。
cpolar 安装成功后，在浏览器上访问 localhost:9200，使用 cpolar 账号登录，进入 Web 配置界面。
5. 使用 cpolar 配置 Open-Lovable 固定公网地址
登录 cpolar Web UI 管理界面后，点击左侧仪表盘的隧道管理——创建隧道：
- 隧道名称：自定义，例如 myclone
- 协议：http
- 本地地址：3000
- 域名类型：随机域名
- 地区：China Top
点击创建。
创建成功后，打开在线隧道列表，可以看到生成了两个公网地址，在其他电脑或者移动端设备上，使用任意一个地址在浏览器中访问即可。
由于 Open-Lovable 不自带登录验证，任何人都能在公网上访问。为保障 API 密钥安全，可以设置密码验证。
回到 cpolar 隧道列表，找到需要修改的隧道点击编辑，点击高级，在 auth 里面直接填写用户名和密码，格式为 username:password。
点击更新，完成后再次打开链接，系统会提示输入用户名和密码，只有授权用户才能访问。
通过上述步骤，实现了 Open-Lovable 的远程访问与安全配置，提升了前端开发的协作效率和使用灵活性。