温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

electron如何打包vue项目

发布时间:2022-03-07 09:10:17 来源:亿速云 阅读:352 作者:小新 栏目:开发技术

这篇文章主要介绍electron如何打包vue项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创建项目

添加electron-builder

1、在项目目录下运行命令:vue add electron-builder
2、electron-builder添加完成后会选择electron版本,直接选择最新版:

electron如何打包vue项目

electron下载失败

vue add electron-builder下载electron会下载失败,使用淘宝镜像下载:cnpm i electron

electron如何打包vue项目

窗体运行

1、下载完成后尝试运行electron窗体:npm run electron:serve

electron如何打包vue项目

2、窗体运行成功:

electron如何打包vue项目

打包exe

1、运行打包命令:npm run electron:build

electron如何打包vue项目

2、打包时由于会在github下载包,国内网络一般会失败,需要手动下载nsis与winCodeSign(网络允许的话你也可以自己到github下载,这里我下载分享出来了),点击这里下载,提取码:1uq8,解压后将nsis与winCodeSign复制(替换)到以下目录:

electron如何打包vue项目

3、复制文件后再次运行打包命令即可打包成功:

electron如何打包vue项目

4、打包完成后,项目目录下会多出一个dist_eletron,打包出的exe即在其中,此exe需安装后使用:

electron如何打包vue项目

5、但在dist_eletron的win-unpacked下也会有与项目同名的exe,此exe无需安装即可运行,但依赖同级目录下的文件,不能直接单独使用:

electron如何打包vue项目

白屏

1、到这里其实打包就已经成功完成了,但你打开exe后会发现与在项目中窗体运行不一样,或者直接白屏,这是由于vue与electron路由模式的原因,vue一般默认history模式。

electron如何打包vue项目

2、需要在router的index.js中修改:从vue-router中引入createWebHashHistory,将createWebHistory(process.env.BASE_URL)改为createWebHashHistory(process.env.BASE_URL)。

electron如何打包vue项目

若为vue2的项目则直接将mode的值从history改为hash:

electron如何打包vue项目

3、删除项目中的dist_eletron目录,重新npm run electron:build打包:

electron如何打包vue项目

4、打包成功:

electron如何打包vue项目

以上是“electron如何打包vue项目”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI