vue 项目使用electron 桌面化
作者:互联网
1.clone electron-quick-start
- 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,即可打包成功(速度大大提升)
标签:npm,vue,桌面,--,start,electron,packager,打包 来源: https://blog.csdn.net/qq_39879542/article/details/122162521