文章目录
- 导读
- 操作步骤
- 原理
- 下载预构建可执行文件
- 文件结构（Windows&Linux下）
- 修改main.js访问指定入口文件
- 打包指定URL
- 打包asar文件
- electron其他打包方案
- 参考资料
导读
大前端时代来临，前端变得无所不在，今天我们就将
web应用秒变客户端软件。
操作步骤
Ps: 需要使用32位的electron，可以通过此链接下载：
原理
下载预构建可执行文件
根据官网部署教程#手动发布教程。
我们需要下载预构建可执行文件（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
