Quasar+Electron开发打包为桌面端exe
上一篇博客写了 Quasar+Cordova 开发打包移动端 app ，今天来写一下 Quasar+Electron 如何开发打包为桌面端 exe。
官方文档
- Electron 英文文档：https://www.electronjs.org/docs/latest/
- Electron 中文文档：electron
- Quasar+Electron 文档：开发 Electron 的准备工作
创建项目并打包
- 创建一个
quasar项目：npm init quasar， 按照提示输入内容 - cd 项目名，比如
cd helloworld - 在
quasar项目中添加Electron模式：quasar mode add electron，然后项目文件夹中会出现一个src-electron文件夹，和src-cordova文件夹一样 - 然后直接运行到电脑即可： q
uasar dev -m electron - 使用
quasar build -m electron可以打包到dist/electron文件夹下（名字写的MobileApp和cordova是因为这本来测试Quasar+Cordova的项目）
打包为 exe
但如果想最后打包成单独的一个可以直接安装的 exe 文件，需要进一步设置。
我按照Quasar electron 打包 Windows 独立/Standalone 安装包进行了操作：
- 安装
winstaller：npm install --save-dev electron-winstaller - 创建一个 JS 脚本
build.js：
var electronInstaller = require("electron-winstaller");
var path = require("path");
resultPromise = electronInstaller.createWindowsInstaller({
appDirectory: path.join("dist/electron/Mobile App-win32-x64"), //这里是输入quasar build -m electron之后生成的路径，我的Output folder............. E:\code_cordova\quasarCordova\dist\electron，所以这里是dist/electron/Mobile App-win32-x64
outputDirectory: path.join("./tmp/build/installer64"), //输出路径，这里可以自定义
authors: "xxx", // 作者名称
exe: "Mobile App.exe", //这里是 /xxxx App-win32-x64 文件夹内的exe的名字
noMsi: true, //不需要mis!
});
resultPromise.then(
() => console.log("It worked!"),
(e) => console.log(`No dice: ${e.message}`)
);- 创建完 build.js 脚本后，运行脚本：
node build.js
运行需要一定时间，等待时间可以打开 /tmp/build/installer64 文件夹，可以看到有文件正在生成：
这个 Mobile AppSetup.exe 就是可以双击安装的 exe 文件。
但是这个 exe 安装的时候我不知道为什么会有一个绿色的小框，它也会自己消失，然后软件能正常用。相比之下我觉得文件夹版本的更好用。
视频教程
喜欢看视频的小伙伴也可以选择直接观看我的教程视频：