electron打包vue项⽬的⽅法步骤⽬录
创建项⽬
添加electron-builder
electron下载失败
窗体运⾏
打包exe
⽩屏
创建项⽬
点击
添加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,将v.BASE_URL)改为v.BASE_URL)。
若为vue2的项⽬则直接将mode的值从history改为hash:
electron vue教程3、删除项⽬中的dist_eletron⽬录,重新npm run electron:build打包:
4、打包成功:
到此这篇关于electron打包vue项⽬的⽅法步骤的⽂章就介绍到这了,更多相关electron打包vue项⽬内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论