实际应用中有个打印证件的功能,应领导要求做成了桌面应用.
之前并没有接触过,在了解过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之后访问会出现空白页面
解决办法:
-
vue2:
-
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