Open-Lovable 远程访问配置：结合 cpolar 实现网页克隆工具跨设备使用
Open-Lovable 是一款面向前端开发者的开源工具，核心功能是将任意网页克隆为可编辑的 React 应用，并支持多类 AI 模型辅助生成代码。它适用于新手学习、中小企业原型开发等场景。
其优势在于拆分后的组件逻辑清晰，能完整保留 CSS 样式，大幅减少手动搭建页面框架的时间。例如在学习电商网站布局时，直接克隆后即可查看 header、footer 等组件结构；在制作产品原型时，克隆同类网页后稍作修改即可快速出效果。
需要注意的是，该工具默认仅能还原静态布局和样式，登录态、动态交互等内容无法完整复刻。使用前需准备好 E2B、Firecrawl 等平台的 API 密钥，并注意保管隐私，避免外泄。
1. 环境准备与安装
前提要求： 需要安装 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 密钥：提供隔离的代码执行环境沙盒。
- Firecrawl API 密钥：AI 网络爬虫工具，用于高效抓取网站内容。
- AI 模型密钥：任选其一（如 Anthropic Claude、OpenAI GPT、Groq 等），用于安全执行代码、抓取网页和调用 AI 接口。
保存文件后，回到终端启动开发服务器：
pnpm run dev
浏览器访问 localhost:3000，即可看到 Open-Lovable 的主界面。
2. 基本使用演示
我们以克隆 Firecrawl 官网首页为例。复制链接后粘贴到输入框，选择已配置的 AI 模型，点击开始。
系统会自动分析页面结构、抓取样式并理解布局。这个过程类似于自动临摹，速度更快且准确度高。
克隆完成后，虽然部分动态效果和登录信息可能缺失，但静态布局和样式已基本完美复刻。点击右上角图标可查看沙盒中生成的站点预览。
确认无误后，点击下载按钮，稍等片刻即可将生成的项目代码下载到本地。解压后在 VSCode 中打开文件夹，可以看到完整的 HTML 结构、CSS 样式及拆分好的组件（如 footer、header 等）。
如需在本地运行克隆后的项目，再次打开终端安装依赖并启动：
pnpm install
pnpm run dev
启动成功后，浏览器访问生成的端口地址，即可验证克隆站点的运行效果。
3. 配置 cpolar 实现远程访问
目前部署的服务仅在局域网内可用。若需在异地通过手机、平板或电脑远程访问，可使用 cpolar 内网穿透工具。
cpolar 支持 TCP/UDP 协议，无需公网 IP 和云服务器，即可将本地服务发布到互联网上。
3.1 安装与登录
访问 cpolar 官网注册账号并下载最新版本。Windows 用户可直接下载安装包，一路默认安装即可。
安装成功后，在浏览器访问 ，使用账号登录 Web 管理界面。
