本篇内容主要讲解“怎么使用electron打包vue项目”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用electron打包vue项目”吧!
1、在项目目录下运行命令：vue add electron-builder
2、electron-builder添加完成后会选择electron版本，直接选择最新版：
vue add electron-builder下载electron会下载失败，使用淘宝镜像下载:cnpm i electron
1、下载完成后尝试运行electron窗体：npm run electron:serve
2、窗体运行成功：
1、运行打包命令:npm run electron:build
2、打包时由于会在github下载包，国内网络一般会失败，需要手动下载nsis与winCodeSign(网络允许的话你也可以自己到github下载，这里我下载分享出来了)，点击这里下载，提取码：1uq8，解压后将nsis与winCodeSign复制(替换)到以下目录：
3、复制文件后再次运行打包命令即可打包成功：
4、打包完成后，项目目录下会多出一个dist_eletron，打包出的exe即在其中，此exe需安装后使用：
5、但在dist_eletron的win-unpacked下也会有与项目同名的exe，此exe无需安装即可运行，但依赖同级目录下的文件，不能直接单独使用:
1、到这里其实打包就已经成功完成了，但你打开exe后会发现与在项目中窗体运行不一样，或者直接白屏，这是由于vue与electron路由模式的原因，vue一般默认history模式。
2、需要在router的index.js中修改：从vue-router中引入createWebHashHistory，将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env.BASE_URL)。
若为vue2的项目则直接将mode的值从history改为hash:
3、删除项目中的dist_eletron目录，重新npm run electron:build打包：
4、打包成功：
到此，相信大家对“怎么使用electron打包vue项目”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
