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

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

win环境,利用builder构建electron+vue的demo - 020_vue_init

常规操作

这里面先说一下常规的 npm install 和 npm 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 - 022_npm_run_dev

win环境,利用builder构建electron+vue的demo - 023_npm_run_dev_2

执行build脚本

在build的时候,可能需要您科学上网下载必要的软件。请知晓。或者您可以参见这篇文章,https://newsn.net/say/electron-builder-error.html

npm run build

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

win环境,利用builder构建electron+vue的demo - 033_after_build

win环境,利用builder构建electron+vue的demo - 034_exe_01

win环境,利用builder构建electron+vue的demo - 035_exe_02

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

win环境,利用builder构建electron+vue的demo - 036_folder

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

最后总结

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

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。