已有Vue项目使用electron打包流程

最新推荐文章于 2024-11-26 14:48:17 发布

༺举个栗子吧༻

最新推荐文章于 2024-11-26 14:48:17 发布

阅读量1.6k

点赞数 3

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_44169663/article/details/104673484

版权

在windows系统下，结合众多博客整理一下简单的打包流程（过程极其痛苦）。不涉及main.js和package.json具体配置，只专于exe打包。按需添加配置请移步官网学习

1、首先安装electron,安装命令cnpm install -g electron 。安装后输入electron -v查看是否安装成功
出现版本号即安装成功
2、安装打包成.exe文件的插件electron-packager. 命令cnpm install -g electron-packager。安装后输入electron-packager出现下图说明安装成功
Emma~~这样就算安装成功了
3、使用electron-packager打包工具打包时，会下载electron的prebuild版本，下载地址是指向国外的，速度非常慢。需要使用淘宝镜像。
npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
或者添加环境变量
在这里插入图片描述
4、下载官网Demo
git clone https://github.com/electron/electron-quick-start

5、将build好的Vue包Copy至electron-quick-start实例根目录

6、cd至上步目录中执行命令 electron-packager . appTest --platform=win32 --arch=x64 --electron-version=8.0.3，因脚本需要下载依赖包，可能会有卡死假象，只要不报错，安静等待即可。（只有第一次因下载会慢，之后光速打包）出现下图即打包成功
在这里插入图片描述
效果图

electron-packager打包命令 “electron-packager . appTest --platform=win32 --arch=x64 --electron-version=8.0.3” 中的electron-version=8.0.3,这个版本号必须要跟你安装的electron版本号一致。

如果换源之后在第6步执行打包命令时出现下图出错在这里插入图片描述
是因为淘宝镜像的electron镜像地址是http://npm.taobao.org/mirrors/electron/8.0.3/electron-v8.0.3-win32-x64.zip。而实际请求报404的原因是版本号前多了一个v。
可以使用命令修改：npm config set electron_custom_dir 8.0.3.

如果还不行，那就用下面最直接的方法吧
在你安装electron-packager目录下找到artifact-utils.js文件，将const path = mirrorVar(‘customDir’, opts, details.version).replace(’{{ version }}’, details.version.replace(/^v/, ‘’));修改为
const path = mirrorVar(‘customDir’, opts, details.version.slice(1,details.version.length)).replace(’{{ version }}’, details.version.replace(/^v/, ‘’)); 在这里插入图片描述
比如我是全局安装的我的目录地址为C:\Users\Administrator\AppData\Roaming\npm\node_modules\electron-packager\node_modules@electron\get\dist\cjs

在执行打包，就可以了。如果在打包过程中还有其他问题，欢迎补充。（这只是我遇到的问题）