electron打包vue3项目

一聚风云

已于 2022-07-18 00:06:24 修改

阅读量1.3k

点赞数

分类专栏： vue.js 文章标签： electron vue.js javascript

于 2022-07-17 23:59:11 首次发布

本文链接：https://blog.csdn.net/IT_interest/article/details/125839131

版权

3 篇文章 0 订阅

订阅专栏

今天想把自己的一个项目打包成.exe文件，查了好久选用了electron，下面是具体步骤。

在项目目录下运行命令：vue add electron-builder，选择最新版即可。
如果下载electron失败了，可以安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org ，然后运行命令：cnpm i electron。

使用npm run electron:serve命令运行electron窗口。
如果没有样式、功能的错误，可以运行命令npm run electron:build对项目进行打包。如果有错误，大概率是因为网络原因失败，可以进行手动下载。或者我准备了一份，可以直接下载copy到本地下面（C:\Users\你的系统文件名\AppData\Local）。

运行成功后项目文件下会出现一个dist_electron，里面就是打包后的.exe程序。dist_electron文件下的.exe文件是需要安装才能使用的，在win-unpacked下的.exe可以直接打开运行，但是需要win-unpacked里的文件支撑，不能单独使用。

如果出现白屏的情况，是由于vue与electron路由模式的原因，改为hash模式。
将createWebHistory换成createWebHashHistory，将createWebHistory改为createWebHashHistory。
然后删除dist_electron，再重新运行打包命令npm run electron:build即可。