记录electron+vue打包桌面应用程序。

实际应用中有个打印证件的功能，应领导要求做成了桌面应用.
之前并没有接触过，在了解过electron是个什么玩意之后，果断决定使用vue做案子，用electron进行打包。


关于node的安装与配置，之前也记录过一篇详细的内容，传送门：nodejs的卸载与重装

全局安装electron（或者在项目里进行局部安装也可）

cnpm  install electron -g

因为是基于vue的。先新建一个vue项目
如下：出现版本号证明有vue环境，直接新建项目。

vue init webpack   项目名    （vue2.0的写法）
vue create 项目名  （vue3.0的写法）

项目初始化完成后。如果在启动在浏览器访问成功，则是ok的
yarn build 或者npm run build 进行打包。打包完会如上图出现一个dist文件夹



首先在dist文件夹下npm init 生成一个package.json文件

在dist文件夹下新建一个js文件，名称与上面生成的package.json文件里main属性的值一致。

index.js

const electron = require('electron') //引入electron模块
let app = electron.app; //创建electron的引用
//创建窗口的引用
let BrowserWindow = electron.BrowserWindow;
let mainWindow = null; //声明要打开的主窗口
app.on('ready', () => {
	mainWindow = new BrowserWindow({
		width: 1000,
		height: 500
	})
	mainWindow.loadFile('index.html');
})

运行 electron . 命令可以预览窗口

注意：vue这里会有个坑：build之后访问会出现空白页面
解决办法：

1. vue2:

2. vue3: 根目录下新建vue.config.js

Module.exports = {
	runtimeCompoler: true,
	publicPath: './'
}

打包应用

electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --electron-version版本号(不是你的h5版本号，是electron版本号) --overwrite --ignore=node_modules   --icon=图标

electron-packager . myelectron --win --out myelectron --arch=x64 --electron-version 13.2.3 --overwrite --ignore=node_modules  --icon=print.ico