一、背景
简介
Electron的优势很多，它可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你也可以把它看作一个 Node. js 的变体，它的目标是专注于桌面应用而不是 Web 服务器端。当然这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器
初衷
目前市面上的资料大都是electron+vue以强关联形式的组合编译，其优点是可以共用一套package.json，但缺点也是特别的突出，坑真的特别特别多，让你始终不知道下个bug会在何时何地出，但又因为强关联，electron和vue相互渗透严重，所以bug调试也是特别的费时费力还未必有好的成效，本人也是因为填坑无力，所以才写的这篇文章。
本文是以Electron+vue形式写的demo，所以将会以Electron+vue形式进行讲解，但诸如其他web框架类似Angular等原理思路也是一样，可以共用
demo链接
二、思路
整体思路非常简单，也非常容易被接受，通俗思路就是：将Electron和Vue相互独立，然后通过Vue生成build包dist，再将编译后的dist文件夹交给Electron，最后通过Electron去加载dist至最终应用程序。具体步骤如下（【】内命名皆随意）：
- 创建空vue项目【项目1】
- 配置【项目1】的package.json文件
- 创建空electron项目【项目2】（与【项目1】的关系可以是完全独立两个项目，也可以嵌套在【项目1】根路径下以独立文件夹形式存在，本文以第二种方式呈现）
- 配置【项目2】的package.json文件
- 编译【项目1】，生成dist文件夹
- 将dist文件夹移动到【项目2】根路径下
- 进入【项目2】根目录，编译【项目2】
- electron-builder打包
三、项目结构
上文说了，该文章是以Electron+vue形式讲解，所以此处给出的项目结构也是Electron+Vue形式，具体如下：
- 整体是vue项目中嵌套electron项目，图中【2】release文件夹包含的就是electron项目相关
- 标记【1】和【3】两个
dist文件夹完全相同，【1】由vue项目打包生成，生成之后copy到【release】根路径下得到【3】*（此处也可以直接将Vue编译后的dist文件夹路径设置到release路径下，这样可以省去dist迁移操作，后面有相关配置介绍）* - 标记【4】是属于electron项目的package文件，作用域也仅限于【release】路径下
- 标记【5】是属于vue项目的package文件，作用域也仅限于vue相关
四、具体流程
到这一步就开始咱们从0到1的框架搭建了，因为只是演示demo，所以最后的作品也只是将Vue官网打包成一个dmg、exe桌面应用程序，但注意事项、思路流程及文件配置下文都会涉及。
4.1、创建vue项目
具体过程就不多赘述了，官网很详细
vue create [projectName]
4.2、创建Electron项目
在【4.1】所建项目的根目录下创建【release】文件夹
在【release】文件夹下执行electron创建命令，详情可以参照electron开发文档。
一个最基本的electron应用应该会有如下结构：
your-app/
├── package.json
├── main.js
└── index.html
具体的创建细节及描述请参考Electron文档-打造你的第一个Electron应用，文档讲的很详细，而且也是中文文档，我这就不复制粘贴了
4.3、配置vue项目config文件
配置该文件的目的是为了顺利打包vue项目，此处我是新建了vue.config.js文件用来处理此类配置，
针对本文的配置也挺简单，只是列出了几项，想看更多配置的可参照配置参考，同样的也是中文文档。
module.exports = {
// 部署生产环境和开发环境下的URL
publicPath: './',
// 生成的文件的总文件夹的名称
outputDir:'./release/dist',
// 指定生成的html文件的输出路径 (配置之后，改变系统默认的index.html的文件名)
indexPath:'./index.html',
// 针对map文件,map文件的作用:打包之后的项目,代码都经过了压缩加密
// 这时如果报错,无法准确得知错误在哪里产生,有了map文件,就可以精准定位到是哪里出错
// 如果打包后发现map文件体积过大,导致整个项目文件体积过大,就可以设置不输出map文件
productionSourceMap:false,
devServer: {
// can be overwritten by process.env.HOST
host: '0.0.0.0',
port: 8080
},
pluginOptions: {
electronBuilder: {
builderOptions: {
win: { icon: './public/app.ico' },
mac: { icon: './public/app.png' }
}
}
}
};
4.4、编译vue项目
此步骤的目的在于生成dist文件夹，默认情况下会生成在vue项目根路径下，但通过对【4.3】的配置，此处将dist文件夹生成在./release/dist，以便Electron最终调用。（对应【4.3】的outputDir标签）
通过前文vue项目创建之后，会在package.json的scripts下生成build指令，大家到时可自行查看，该篇以本文为例如下：
// 本文中的package.json
"scripts": {
"serve": "vue-cli-service serve", // 此命令用于web调试
"build": "vue-cli-service build"
}
// 在命令行执行如下命令可以让vue打包生成dist文件夹
npm run build
好了，这一步过后就没有Vue什么事了，剩下的就都是Electron项目要做的事了，大致这么两件事：1、如何加载dist文件夹；2、打包桌面应用
4.5、配置Electron的main.js文件
main.js是Electron项目的启动文件，作为门户文件，它在Electron中的作用也是非常巨大的，监管着所有的声明周期函数，非常重要，不可替代；但文件本身却并不复杂，在创建Electron项目时提供的官网链接中已对main.js的内容做了详细说明，直接copy就好，此处讲的也只是对与官网配置不一样的地方，具体如下：
红框标注的地方非常重要，就是因为这段代码，才实现的Electron访问dist的可能，也才有下文种种。
OK，到这一步后其实就可以通过 electron . 命令在开发模式下运行应用程序了，完成到这一步相信大家跟我一样都是信心满满，ok，到这一步后咱们离着最终打包成可执行文件就只差package.json这一关了。
4.6、配置Electron项目下package文件
package.json是一个项目的灵魂文件，也是咱们此次打包所经历的最后一道门坎，所以此处专门拿一小章节描述，当然描述的内容有限，也只是对自己走坑埋坑的一些教训总结，让大家引以为戒，废话不多说了，以下是本demo所涉及的配置信息：
对于一些配置参数的含义我认为在图片中标注的还算详细，大部分就不再赘述了，此处我着重想说的就一下几个：
- main：这个参数指定的是Electron程序的启动入口，对应的也是Electron跟路径下的main.js文件，这个一定不能有错。
- output：这个参数指定的是最终应用程序安装包的输出路径，默认与package.json同路径，此处是给它新设定了一个outdir文件夹专门存储，
程序打包成功后该文件夹会自动生成，无需刻意创建 -
files：这个参数被高亮了，因为我觉着有必要重点说明，因为后续会有很多bug都是出自这个参数，它的作用是告诉Electron，哪些文件需要被打包进最终程序（dmg、exe）之中，但很多人可能会因为少打包了这个那个的文件而导致最终的程序报这样那样的错误无法正常运行，所以这个参数特别重要，此处咱们被打包了四个文件：dist是Vue生成的编译文件，也是Electron最终要呈现的部分，所以必须要有；main.js作为程序的启动函数，必须要有；node_module是Nodejs的库文件，其中有很多方法都被程序所调用，所以必须要有；package.json作为配置文件，我认为也必须要有（当然没测试过没有的情况，有兴趣的自己测试），所以此处我是给files指定了四个被打包项，具体哪些需要被设定需要结合实际项目而定，但思路要求如上
执行完这一步，终于可以进行最终的打包操作了，兴奋吧～～。
4.7、打包
资源文件准备
因为Electron打包时必需要icon等基本资源文件，否则打包不通过，鉴于此，本文也是直接在【release】文件夹下创建了一个【build】文件夹，专门用于存储icon等资源文件，之所以在【release】文件夹下创建，也是因为这些icon信息只属于Electron项目范畴。
打包方式选择
Electron目前有两种打包方式：electron-packager和electron-builder，本文采用electron-builder方式进行打包，也是因为它比起electron-packager有更多的优势：
electron-builder优势总结：
有更丰富的功能，支持更多的平台，支持自动更新，打出的包更轻量，打出的包不会暴露源码信息，具体表现为：
- 可以打包成msi、exe、dmg文件（前两种window系统下才可以，后一种MacOS系统）
- 几乎支持所以平台的所有格式
- 支持Auto Update
- 支持CLI和JS API两种使用方式
鉴于以上优势，最终选择electron-builder方式打包
开始打包
对于electron-builder形式的打包，我认为这篇文章写的不错，包含了打包指令，各指令意思，也包含了打包环境配置，可以直接参考：electron-builder打包见解，本文在这里就不多赘述了
打包结果
到了出成绩的时候了，下面是此次demo的最终结果输出，因为本人是mac电脑，所以最终只运行了dmg文件并截图，在此强烈建议在window环境下打包exe格式，因为打包的过程中会用到系统本身的东西，尤其项目存在与串口交互逻辑的时候（serialport等）
执行打包操作后最终项目结构：
到此Electron+vue从0-1的打包过程就结束了，最终在平台上的运行效果：
demo仓库：传送门