electron打包vue项目的方法 步骤
创建项目
点击这里
添加electron-builder
1、在项目目录下运行命令：vue add electron-builder
2、electron-builder添加完成后会选择electron版本，直接选择最新版：
electron下载失败
vue add electron-builder下载electron会下载失败，使用淘宝镜像下载:cnpm i electron
窗体运行
1、下载完成后尝试运行electron窗体：npm run electron:serve
2、窗体运行成功：
打包exe
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项目的方法 步骤的文章就介绍到这了,更多相关electron打包vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue使用Element-UI部分组件适配移动端问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
在现代Web开发中,前端框架的使用越来越普遍,而Vue.js作为一款优秀的前端框架,其生态系统中有着非常重要的一个组件——Vue Router,在本篇博客中,我们将深入探讨如何在Vue Router中定义路由规则,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了el-table实现给每行添加loading效果案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vant 时间选择器--开始时间和结束时间实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要给大家介绍了关于vue权限路由实现方法的相关资料，文中通过示例代码介绍地方非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要介绍了详解Vscode中使用Eslint终极配置大全，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家介绍了vueJs函数toRaw markRaw使用对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
今天小编就为大家分享一篇vue click.stop阻止点击事件继续传播的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
jsMind是一个基于Js的思维导图库,jsMind是一个纯JavaScript类库,用于创建、展示和操作思维导图,这篇文章主要给大家介绍了关于vue2使用思维导图jsmind的详细代码,需要的朋友可以参考下2024-06-06
Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下2023-09-09
最新评论