我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:win环境,如何利用builder构建electron-vue范例? - electron-builder-demo-win
win环境,如何利用builder构建electron-vue范例?(图11-1)

调用init脚本

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

vue init simulatedgreg/electron-vue my-project

苏南大叔:win环境,如何利用builder构建electron-vue范例? - 020_vue_init
win环境,如何利用builder构建electron-vue范例?(图11-2)

常规操作

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

cd my-project
npm install
npm run dev

苏南大叔:win环境,如何利用builder构建electron-vue范例? - 021_npm_install
win环境,如何利用builder构建electron-vue范例?(图11-3)

苏南大叔:win环境,如何利用builder构建electron-vue范例? - 022_npm_run_dev
win环境,如何利用builder构建electron-vue范例?(图11-4)

苏南大叔:win环境,如何利用builder构建electron-vue范例? - 023_npm_run_dev_2
win环境,如何利用builder构建electron-vue范例?(图11-5)

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

苏南大叔:win环境,如何利用builder构建electron-vue范例? - npm-install-error
win环境,如何利用builder构建electron-vue范例?(图11-6)

执行build脚本

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

npm run build

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

苏南大叔:win环境,如何利用builder构建electron-vue范例? - 033_after_build
win环境,如何利用builder构建electron-vue范例?(图11-7)

苏南大叔:win环境,如何利用builder构建electron-vue范例? - 034_exe_01
win环境,如何利用builder构建electron-vue范例?(图11-8)

苏南大叔:win环境,如何利用builder构建electron-vue范例? - 035_exe_02
win环境,如何利用builder构建electron-vue范例?(图11-9)

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

苏南大叔:win环境,如何利用builder构建electron-vue范例? - 036_folder
win环境,如何利用builder构建electron-vue范例?(图11-10)

苏南大叔:win环境,如何利用builder构建electron-vue范例? - 037_folder_2
win环境,如何利用builder构建electron-vue范例?(图11-11)

特别说明

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

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

最后总结

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

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