通过 Nativefier 将网站打包成 Electron 应用程序

概览

想将自己精美的网站打包成 Windows 的 .exe 或 macOS 的 .app 应用吗？
本文将以 Windows .exe 的方案为例，介绍如何生成一个无需浏览器即可直接运行的独立应用。

Nativefier：一款简洁高效的打包工具
Nativefier 是一个可以将网站快速打包为桌面应用的工具，支持 Windows、Mac 和 Linux 系统。

只需一行命令，轻松生成独立应用
通过 Nativefier，你可以快速创建一个独立的应用程序，且支持多种个性化选项，例如：

• 自定义应用名称
• 设置窗口大小
• 添加专属图标

完成后，即可像普通软件一样使用
生成的 .exe 文件是一个真正独立的应用，能够直接运行，无需浏览器支持，带来更便捷的使用体验！

流程

先决条件

a. 环境部署

安装 Node.js 和 npm（Node.js 包含 npm）。

• 下载并安装 Node.js：
  • 前往 Node.js 官网 下载适用于 Windows 的 LTS 版本。
  • 运行安装程序并按照提示安装。
  • 完成后，打开 命令提示符（CMD） 或 PowerShell，输入以下命令显示版本号即安装成功：

node -v
v22.12.0

b. 切换镜像

b.1.npm registry 镜像

因国内网络不稳定 或 被防火墙限制，通过 npm 安装 nativefier 可能网络超时，切换目标镜像源。

b.1.a. 切换为 淘宝镜像源
由阿里云提供

在 CMD 或 PowerShell 中执行以下命令，将 npm 源切换为淘宝镜像：

npm config set registry https://registry.npmmirror.com

b.1.b. 验证 npm 源是否修改成功

执行以下命令检查当前 npm 镜像源，返回结果为 https://registry.npmmirror.com 表示成功切换：

npm config get registry
https://registry.npmmirror.com

b.1.c. 临时解决（不修改全局源）

如果不想永久修改 npm 源，可以通过 --registry 参数临时指定镜像源：

npm install -g nativefier --registry https://registry.npmmirror.com

b.1.d. 检查 npm 版本

如下显示版本号即表示已经安装成功：

npm -v
11.0.0

b.1.e. 升级 npm 版本

如果提示版本较低，请使用以下命令安装升级：

npm install -g npm@11.0.0

changed 16 packages in 5s

24 packages are looking for funding
  run `npm fund` for details

b.2.nativefier electron 镜像

第一次打包网站时，Nativefier 将下载 Electron 运行时文件（electron）。下载速度慢可能是因为 Electron 文件托管在国外服务器，网络连接不稳定导致下载缓慢。

b.2.a. 设置环境变量来优化 Electron 下载

设置环境变量 ELECTRON_MIRROR

在 CMD 或 PowerShell 中执行以下命令：

• CMD 命令行：

set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

• PowerShell：

$env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

b.2.b. 永久设置环境变量（可选）

如果想让 ELECTRON_MIRROR 永久生效，可以通过 系统环境变量 进行设置：

1. 右键 “此电脑” → “属性” → “高级系统设置” → “环境变量”。
2. 在 系统变量 或 用户变量 中点击 新建：
   • 变量名：ELECTRON_MIRROR
   • 变量值：https://npmmirror.com/mirrors/electron/
3. 保存后重启 CMD 或 PowerShell。

安装 Nativefier

使用 npm 安装 Nativefier：

• 打开 CMD 或 PowerShell，输入以下命令：

npm install -g nativefier

changed 226 packages in 6s

56 packages are looking for funding
  run `npm fund` for details

• 完成后，输入以下命令显示版本号表示安装成功：

nativefier --version
52.0.0

如果显示 Nativefier 的版本号，表明你成功安装了 Nativefier！🎉。

使用 Nativefier 打包网站

以下是将网站打包成独立应用的详细步骤：

1. 在 CMD 或 PowerShell 中，输入以下命令：

nativefier "https://hexingxing.cn" --name "hexingxing" --icon "mainlogo.ico"

• https://hexingxing.cn 是需要打包的网站地址。
• --name "hexingxing" 是生成的应用程序名称。
• --icon "mainlogo.ico" 是生成的应用程序图标。

2. 等待生成完成
Nativefier 首次打包会自动下载必要的依赖项，并将网站打包成适用于 Windows 的可执行应用。

注意：若此处等待太久报错网络超时，请关注以上 “b. 切换镜像 >> b.2.nativefier electron 镜像” 流程。

3. 完成后，运行结果和输出文件夹路径会显示在终端中。

例如：

nativefier "https://hexingxing.cn" --name "hexingxing" --icon "mainlogo.ico"


    Hi! Nativefier is minimally maintained these days, and needs more hands.
    If you have the time & motivation, help with bugfixes and maintenance is VERY welcome.
    Please go to https://github.com/nativefier/nativefier and help how you can. Thanks.



Processing options...

Preparing Electron app...

Converting icons...

Packaging... This will take a few seconds, maybe minutes if the requested Electron isn't cached yet...

Finalizing build...
App built to C:\Users\hexingxing\hexingxing-win32-x64, move to wherever it makes sense for you and run the contained .exe file.

在以上终端命令中输入 "start ." 后并回车，即可快速打开网站应用程序所在目标文件夹。

运行打包好的应用

1. 打开网站应用程序所在目标文件夹（例如 C:\Users\YourUser\hexingxing-win32-x64）。
2. 在文件夹中找到 .exe 文件（例如 hexingxing.exe）。
3. 双击运行 .exe 文件，网站会以独立应用窗口的形式打开。

自定义打包选项（可选）

你可以使用 Nativefier 提供的选项进一步自定义生成的应用，例如设置图标、窗口大小等：

设置应用图标

• 准备一个 .ico 格式的图标文件。
• 使用 --icon 参数指定图标路径：

nativefier "https://example.com" --name "MyApp" --icon "C:\path\to\icon.ico"

设置窗口大小

• 使用 --width 和 --height 参数：

nativefier "https://example.com" --name "MyApp" --width 1280 --height 720

禁用导航栏

• 使用 --disable-dev-tools 参数隐藏开发者工具：

nativefier "https://example.com" --name "MyApp" --disable-dev-tools

---