前言
一般情况下，我作为一名菜鸟级前端开发，我并不具备在此发文的资格，但是我想发。为了这篇普通文章的诞生，首先我要感谢石老师，是他给了我这一次机会，其次我要感谢我的妻子，她容忍我把2021年12月10日晚两个小时花费在了这篇文章上，而这些时间原本应该属于我的家人。她的宽容对这篇文章的诞生至关重要。
1.什么是Electron？
Electron 是一个可以让你用 HTML、CSS 和 JavaScript 来构建跨平台桌面应用的运行时(runtime),是由名叫Cheng Zhao的GitHub工程师创建的一个开源项目。
Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为 Mac、Windows 和 Linux 系统下的应用来实现这一目的。
简单来说，Electron 相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，这样就可以把网页打包成一个在桌面运行的程序。
2.Electron的运行原理
(1)Electron应用由两种进程组成:主进程以及零个或多个渲染器进程。Electron运行时内置了辅助应用开发的各种模块,有些模块可以用在这两种模块中,比如读写系统剪贴板的模块;而有些模块,比如访问操作系统API的模块,则仅限于在主进程中使用。
(2)主进程承担着几项重要的职能。它可以响应应用的生命周期事件,这些事件包括应用的启动、退出、准备退出、切换后台、切换前台等等.主进程还负责与原生操作系统API进行通信.主进程可以使用Electron的BrowserWindow模块来创建和销毁渲染进程。
(3)渲染器进程可以加载Web页面,向用户显示GUI界面。与普通web页面不同,在渲染器进程中执行的代码可以访问Node的所有API,利用这个特性,渲染器进程可以使用原生模块,实现与底层系统的交互。
渲染器进程之间交互隔离,并且也不允许它们直接访问操作系统级别的API,Electron实现了一套进程通讯机制,当渲染器进程需要访问任何操作系统级别的API时,可以与主进程通信,由主进程实现必要的功能。
3.项目环境构建
Vue.js 作为目前最热门的前端开发框架，再此演示如何搭建一个 Vue2.0 +Electron 项目开发环境。首先是搭建 Vue 开发环境，这里我使用脚手架工具 vue-cli。
1，安装Node.js
下载地址：https://nodejs.org
将下载下来的 msi 文件运行安装即可。
在命令提示符（cmd）中运行 npm -v，如果出现版本号则说明 Node.js 安装成功
2，安装 vue-cli
（1）运行如下命令安装：
npm install -g vue-cli（2）测试下 vue-cli 是否安装成功 , 运行命令（注意最后的 V 是大写）
vue -V 如果出现相应的版本号，则说明安装成功。
3，在终端中运行 cd 命令，进入想要创建项目的目录位置
比如我们想把工程创建在 E 盘中 demo 目录下，首先在命令控制台中进入到这个文件夹。
4，接着执行如下命令
vue init webpack electron_vue_demo5，上面命令执行后，会跳出几个选项让你回答。
除了第三个选项需要输入个作者外，其他选项我们直接回车，或者输入 y 回车即可
附上选项:
Project name：项目名称（直接回车则使用括号中默认名字）
Project description：项目描述（直接点击回车则使用默认名字）
Author：作者
Runtime + Compiler: recommended for most users：运行加编译
Runtime-only：仅运行时 I
nstall vue-router?：是否安装 vue-route（这是官方的路由，大多数情况下都使用）
Use ESLint to lint your code?：是否使用 ESLint 管理代码（ESLint 是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。)
Pick an ESLint preset：选择一个 ESLint 预设，编写 vue 项目时的代码风格
Setup unit tests with Karma + Mocha?：是否安装单元测试
Setup e2e tests with Nightwatch?：是否安装 e2e 测试 6，一个Vue项目就构建完毕
项目创建完毕后可以看到目录下多出了一个项目文件夹 electron_vue_demo
修改 config/index.js
将 build 属性节点下的 assetsPublicPath 改成 ''
修改的目的是确保打包后外部引入的 js 和 css 文件路径正确，这样做好处是：我们可以直接在本地打开并访问打包后的文件。
控制台执行
npm run dev 启动项目
npm run build 打包完成后，项目中会生成 dist 文件夹,这也就是electron桌面应用内嵌的界面
7，安装 Electron
（1）由于网络问题，使用 npm 安装 Electron 会比较慢，甚至完全没有进度。这里改用cnpm
首先执行如下命令安装 cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org （2）安装后执行 cnpm -v 查看是否安装成功
（3）接着进入 Vue 项目文件夹执行如下命令安装 Electron 依赖：
cnpm install --save-dev electron 8，安装打包依赖(这里我用的是electron-packager)
cnpm install --save-dev electron-packager 安装后查看项目的 package.json 文件，可以看到这个两个依赖都已添加
9，Electron 主程序文件(主进程)
首先在 Vue 项目根目录下创建一个 main.js 文件，它是 Electron 主程序入口，具体内容如下：
//const {app,BrowserWindow} = require('electron'); 另一种引入写法
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
// 创建一个窗口，大小 800 * 600
mainWindow = new BrowserWindow({width: 800, height: 600});
// 在窗口内要展示的内容为 ./dist/index.html，即打包生成的index.html
//mainWindow.webContents.loadFile(__dirname+'./dist/index.html'); 另一种写法
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './dist', 'index.html'),
protocol: 'file:',
slashes: true
}));
// 自动打开调试台
mainWindow.webContents.openDevTools({detach: true });
mainWindow.on("closed",function(){
mainWindow = null;
})
}
//启动应用加载
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
})
app.on('activate', function () {
if (mainWindow === null) createWindow();
});
10，编辑 Vue 项目的 package.json 文件
（1）指明electron应用主文件入口（即上面添加的 main.js 文件）
"main": "main.js", //main项 改为 main.js
"scripts": {
"electron:start": "electron ./"
}
执行指令启动electron应用
npm run build
npm run electron:start
可以看到我们的桌面应用运行起来了
4.项目打包分发
（1）在项目的 package.json 文件编辑：
在scripts项中增加:
"packager": "electron-packager ./ HelloWorld-win=x32 --out ./bin --electron-version 13.0.1 --overwrite --icon=./static/img/logo.ico"（2）在项目文件夹下依次执行如下命令，进行编译并打包：
npm run build
npm run packager
（3）打包成功后会在根目录下生成一个bin文件夹,里面HelloWorld.exe,双击执行,我们就拥有了一个桌面应用啦.
因为我的工作模式是内网开发，更多的时候我会选择下载指定的版本打包，下附单独版本打包地址：
附淘宝镜像地址:https://npm.taobao.org/mirrors/electron
本文旨在帮助没有用过electron的小伙伴简单将vue2.0项目打包为一个electron桌面应用，不涉及深度知识，不喜勿喷。初级前端小磊2021.12.10晚上