如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

electron+vuedemo 有两种构建选项,一个是 builder,一个是 packager 。我们本篇文章中,将在window下面 使用builder进行构建。在查看本篇文章之前,请确保您做好相关的准备工作。

win 环境,利用 builder 构建 electron+vue 的 demo - electron-builder-demo-win
win 环境,利用 builder 构建 electron+vue 的 demo(图11-1)

调用init脚本

在初始化脚本中,请注意选择 builder,注意填写author姓名。否则在最后构建的那一步,会显示错误。

vue init simulatedgreg/electron-vue my-project

win 环境,利用 builder 构建 electron+vue 的 demo - 020_vue_init
win 环境,利用 builder 构建 electron+vue 的 demo(图11-2)

常规操作

这里面先说一下常规的npm installnpm run dev。无论选择builer还是packager,这一步都是一样的。

cd my-project
npm install
npm run dev

win 环境,利用 builder 构建 electron+vue 的 demo - 021_npm_install
win 环境,利用 builder 构建 electron+vue 的 demo(图11-3)

win 环境,利用 builder 构建 electron+vue 的 demo - 022_npm_run_dev
win 环境,利用 builder 构建 electron+vue 的 demo(图11-4)

win 环境,利用 builder 构建 electron+vue 的 demo - 023_npm_run_dev_2
win 环境,利用 builder 构建 electron+vue 的 demo(图11-5)

在这里,如果网络不好的话,就可能会出现如下类似的错误提示,其实您不必惊慌。解决好网络问题就行,多重试几次吧。网络不好,下载失败。才会进入自行编译的流程呢。如果您确实要走编译的流程的话,可能需要正确安装python2环境。

win 环境,利用 builder 构建 electron+vue 的 demo - npm-install-error
win 环境,利用 builder 构建 electron+vue 的 demo(图11-6)

执行build脚本

build的时候,可能需要您科学上网下载必要的软件。请知晓。或者您可以参见这篇文章:

npm run build

在build目录下面会生成 my-project的exe文件,见下图。同时,win-unpacked目录下面会生成大量的dll文件。

win 环境,利用 builder 构建 electron+vue 的 demo - 033_after_build
win 环境,利用 builder 构建 electron+vue 的 demo(图11-7)

win 环境,利用 builder 构建 electron+vue 的 demo - 034_exe_01
win 环境,利用 builder 构建 electron+vue 的 demo(图11-8)

win 环境,利用 builder 构建 electron+vue 的 demo - 035_exe_02
win 环境,利用 builder 构建 electron+vue 的 demo(图11-9)

相关目录的情况,在这一步中,很多人说会出各种问题,比如白屏啊。比如timeout啊,这些。建议大家先注意一下,自行检查一下自己是否能够科学上网。自己的node_modules目录里面的lib是否下载完整,譬如白屏的情况,删除node_modules,使用yarn再次安装一次,再试试。

win 环境,利用 builder 构建 electron+vue 的 demo - 036_folder
win 环境,利用 builder 构建 electron+vue 的 demo(图11-10)

win 环境,利用 builder 构建 electron+vue 的 demo - 037_folder_2
win 环境,利用 builder 构建 electron+vue 的 demo(图11-11)

特别说明

很多人运行完这个基于builderelectron-vue的例子后,就会有无数的关于安装过程的问题蹦出来,比如:为什么不能选择安装位置,为什么不能定制图标等等问题。怎么说呢?要不,您就用packager打包(或者builder打包得到的win-unpacked文件夹,再加上innosetup之类的组合。

或者看看这篇说明,您其实可以定制builder中,有关nsis的表现样式的,也就是你们有关安装界面的一堆不满,其实都是可以从下面这篇文章里面得到答案。

最后总结

本篇文章是利用builder来生成对应的exe的,下一篇文章中,苏南大叔将使用packager做同样的build操作。欢迎继续关注苏南大叔的electron相关文章。

 【源码】代码片段及相关软件点此获取

 【js】秘籍文章入口,仅传授于有缘之人   js    electron

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!