[electron] 01 一分钟web应用秒变客户端软件（附原理及其他各种打包方案）

导读

大前端时代来临，前端变得无所不在，今天我们就将web应用秒变客户端软件。

操作步骤

1. 从链接https://download.csdn.net/download/kinghzking/78131790下载electron改-64位版本（web应用秒变客户端软件）

2. 解压到任意目录

3. 拷贝web应用打包后的目录到resources\app\dist目录
   

4. 启动electron.exe
   
   最终效果如下：
   

Ps: 需要使用32位的electron，可以通过此链接下载：https://download.csdn.net/download/kinghzking/78131834

原理

下载预构建可执行文件

根据官网部署教程#手动发布教程。

我们需要下载预构建可执行文件（prebuilt binaries），这里选择的是v8.3.4的版本：https://github.com/electron/electron/releases/tag/v8.3.4，该版本有如下几个有点：

• 二进制文件相对新版本较小
• 这是自我感觉比较稳定的版本。

文件结构（Windows&Linux下）

对于源文件，目录结构如下：

对于存档asar文件，目录结构

其实通过github下载的预构建可执行文件中，resources目录下只有一个叫做default_app.asar的文件，

我们通过asar解压文件asar extract default_app.asar default_app，可以查看该目录结构如下：

可以看出来，electron其实就是讲asar文件当做文件夹访问了，内部是也是main.js和package.json等文件。

修改main.js访问指定入口文件

上一小节中，我们解压的default_app.asar文件内容比较复杂，引用太多其他的内容了，为了让大家更好的理解，我们这里使用最简单的electron示例项目https://github.com/electron/electron-quick-start，将其中的main.js和package.json文件拷贝到resources\app目录。

因为默认vue项目打包npm run dev后就是dist，我们直接将index.html替换为dist/index.html，以后只要将vue等项目的打包后文件拷贝到dist目录就可以了。

打包指定URL

除了本地应用外，还可以指定加载URL，比如我们让electron访问自己的网站，我们只需要将mainWindow.loadFile('dist/index.html') 替换为mainWindow.loadURL('http://www.l0l.fun')就可以了。

效果如下图（史上最烂个人主页）：

打包asar文件

REM 全局安装asar
npm install -g asar

REM 切换到resources目录
cd resources

REM 打包asar，文件名固定为app.asar
asar pack app app.asar

最终在resources目录中只保留app.asar就可以了。

electron其他打包方案

• electron-builder（默认electron-vue项目，支持更多的平台，支持自动更新，打出的包更为轻量，setup安装程序）
• electron-forge
• electron-packager
• nativefier （支持一键打包，修改应用图标，海量配置参数，支持docker。https://github.com/jiahaog/nativefier）

参考资料

• electron官网部署教程 https://www.electronjs.org/zh/docs/latest/tutorial/application-distribution
• 使用electron将现有vue项目打包为exe https://www.51cto.com/article/627670.html
• qq群：夜猫逐梦技术交流裙/953949723