win环境，如何利用builder构建electron-vue范例？

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

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

• https://newsn.net/say/electron-vue-demo-win-prepare.html

调用init脚本

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

vue init simulatedgreg/electron-vue my-project

常规操作

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

cd my-project
npm install
npm run dev

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

执行build脚本

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

• https://newsn.net/say/electron-builder-error.html

npm run build

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

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

特别说明

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

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

• https://www.electron.build/generated/nsisoptions

最后总结

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

• https://newsn.net/tag/electron/

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