vue 项目使用electron 桌面化

本文主要是介绍vue 项目使用electron 桌面化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.clone electron-quick-start

1. 1先 git clone https://github.com/electron/electron-quick-start.git
   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 根目录下

2.3 配置 main.js
mainWindow.loadURL(“http://localhost:8080”)
ps:
设置 http://localhost:8080 是因为项目中 配置了devServer ，方便演示
可删除反向代理配置后 重新build，将loadURl 设置为服务器后端的地址

执行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

执行打包命令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/

执行 打包命令npm run pack，即可打包成功（速度大大提升）

这篇关于vue 项目使用electron 桌面化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！