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

进入项目目录：

cd open-lovable 

安装项目依赖。官方推荐使用 npm，但建议使用 pnpm 以获得更好的性能。若未安装 pnpm，可先执行以下命令：

npm install -g pnpm

接着使用 pnpm 安装依赖，过程可能需要几分钟：

pnpm install

完成后打开 VSCode，找到 env.example 文件，复制全部内容。

新建名为 env.local 的文件，粘贴刚才复制的内容。

环境变量中必须配置以下内容：

1. E2B API 密钥：提供隔离的代码执行环境。
2. Firecrawl API 密钥：用于高效自动抓取网站内容。

这两个是必须的，建议去官网申请免费密钥。下方四个 AI 模型任选其一即可，用于后续操作时的代码执行、网页抓取和接口调用。

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

pnpm run dev 

浏览器访问 localhost:3000，即可看到 Open-Lovable 的页面。

简单使用

尝试克隆一个目标网页，例如 Firecrawl 官网首页。复制链接后粘贴到输入框，选择已配置的 AI 模型开始生成。

系统会自动分析页面结构、抓取样式、理解布局。

生成结果几乎与原站一致，虽然部分动态效果和登录信息缺失，但静态布局和样式已完美复刻。

点击右上角图标可查看沙盒中的克隆站点。

手动编写这些组件通常需要大量时间，而此处仅需几秒钟。下载生成的项目代码到本地。

解压压缩包，在 VSCode 中打开文件夹即可查看生成的代码。包含 HTML 结构、CSS 样式及拆分好的组件（如 footer、header），结构清晰。

在本地运行测试：

pnpm install
pnpm run dev 

启动后获取端口地址，浏览器访问即可预览克隆站点。

安装与配置 cpolar

目前仅在本地局域网可访问，如需在外部网络（手机、平板、异地电脑）远程使用，可使用 cpolar 内网穿透工具。无需公网 IP，也无需准备云服务器。

cpolar 是一款支持 TCP/UDP 协议的内网穿透工具，可将本地服务发布到互联网上。

访问 cpolar 官网注册账号并下载最新版本。

登录成功后，下载并安装 cpolar（Windows 版本一路默认安装即可）。

安装完成后，浏览器访问 localhost:9200，使用账号登录 Web 配置界面。

配置固定公网地址与安全验证

登录 cpolar Web UI 后，点击左侧隧道管理创建新隧道：

• 隧道名称：自定义（如 myclone），注意不要重复
• 协议：http
• 本地地址：3000
• 域名类型：随机域名
• 地区：China Top

点击创建。

创建成功后，在线隧道列表会显示两个公网地址。在其他设备或移动端浏览器中访问任一地址即可。

此时可正常访问，但 Open-Lovable 本身不带登录验证，公网上任何人都可能访问。为保障 API 密钥安全，建议设置密码验证。

回到隧道列表，点击编辑。

点击高级选项，在 auth 字段填写用户名和密码（格式：username:password）。

更新后再次访问链接，系统将提示输入凭据。只有掌握密码的用户才能访问，安全性大幅提升。

总结

Open-Lovable 凭借网页克隆为 React 应用的核心能力，解决了前端开发中手动搭建页面耗时、新手学习代码结构难的问题。cpolar 内网穿透则弥补了其仅能局域网使用的短板，通过简单配置实现远程访问及安全控制。两者结合提升了前端开发的协作效率和使用灵活性，贴合实际工作中的各类场景需求。

cpolar 官网