vue 项目使用electron 桌面化

1.clone electron-quick-start

  1. 1先 git clone https://github.com/electron/electron-quick-start.git
    vue 项目使用electron 桌面化1.2 cd 进入项目
    1.3 npm install (建议使用 cnpm 速度快太多)
    1.4 npm start
    正常启动 窗口 显示 … 这个步骤ok

2.vue项目 build

2.1.npm run build
2.2.将构建后dist 下的文件全部copy 到 electron-quick-start 根目录下
vue 项目使用electron 桌面化
2.3 配置 main.js
mainWindow.loadURL(“http://localhost:8080”)
ps:
设置 http://localhost:8080 是因为项目中 配置了devServer ,方便演示
可删除反向代理配置后 重新build,将loadURl 设置为服务器后端的地址
vue 项目使用electron 桌面化

执行npm start
正常启动 窗口 显示 … 这个步骤ok,说明一切都没问题了 只剩下打包了

打包

1.安装打包器
npm install electron-packager -g
2.在package.json中
新增 “pack”:“electron-packager . ‘learn-electron’ --platform=win32 --arch=x64 --out=./out --asar --app-version=0.0.1”
ps:此命令 参数参考
https://segmentfault.com/a/1190000017714517
https://github.com/electron/electron-packager/blob/main/usage.txt
vue 项目使用electron 桌面化

执行打包命令npm run pack,即可打包成功 (速度太慢 建议使用下面的优化后 再打包)

项目中就会多个out文件夹,out文件夹里面会有个test.exe文件,点击即可打开我们的应用

优化 electron-packager 打包速度太慢

参考https://blog.csdn.net/qq_35872456/article/details/96905685

在electron-packager命令行加入参数
–download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/

vue 项目使用electron 桌面化
执行 打包命令npm run pack,即可打包成功(速度大大提升)

上一篇:Electron打包简易教程


下一篇:electron打包:electron-packager及electron-builder两种方式实现(for Windows)