如何深入理解 electron-vue 的 build 构建命令

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

electron-vue作为目前electron下最最火热的一个基础框架，但是在实际的操作中，很多新人会对这个框架的构建命令，有很多不大不小的误会，导致很多意料之外的情况发生。很有可能你的问题是：为什么构建处理的页面是空白？为什么我的修改没有生效？如何修改打包参数？打包参数如何传递？

本着只写一次，不用解释很多次的目的，苏南大叔写下这篇文章。对于如何构建基于electron-vue的项目，还是搞不明白的小白，可以仔细阅读阅读本文的文字。

electron-vue的构建命令和普通的electron项目不一样

既然带了个vue的字样，就肯定有其不同之处。所以，在electron-vue项目下，所有试图直接使用electron-packager或者electron-builder命令，进行项目构建的行为，都是错误的。

electron-vue的项目，无论你初始化的时候，选择的是electron-packager，或者是electron-builder，它的构建命令都是npm run build。

npm run build这个命令是分为两部分的，第一部分是：vue的项目构建，从src目录到dist目录。第二部分是：electron-packager或者electron-builder，从dist目录到build目录。

请打开项目根目录下面的package.json文件，找到scripts节点，看看里面的build定义。你就有会有全新的理解。

如何修改electron-packager参数

当你的electron-vue的项目，使用electron-packager进行构建的时候，参数的修改是在.electron/build.config.js里面修改的。把原本已经熟悉的命令行里面的参数，都移动到这个.electron/build.config.js配置文件来即可，不解释。

electron-packager参数大全，可以点击下面这个连接查看：

• https://newsn.net/say/electron-packager-command.html

得出上述结论的辅助分析过程，截图如下：

如何修改electron-builder参数

当你的electron-vue的项目，使用electron-builder进行构建的时候，参数的修改是在packager.json里面的build节点里面修改的。

一些辅助分析截图如下：

相关文章

• mac环境，利用builder构建electron+vue的demo ：https://newsn.net/say/electron-vue-demo-mac-builder.html 。
• mac环境，利用packager构建electron+vue的demo ：https://newsn.net/say/electron-vue-demo-mac-packager.html 。
• win环境，构建 electron+vue demo的准备工作 ：https://newsn.net/say/electron-vue-demo-win-prepare.html 。
• win环境，利用builder构建electron+vue的demo ：https://newsn.net/say/electron-vue-demo-win-builder.html 。
• win环境，利用packager构建electron+vue的demo ：https://newsn.net/say/electron-vue-demo-win-packager.html 。

总结

综述，各种关于electron-vue的很多奇怪问题，都可以用本篇文字来解释。请大家问问自己:

• 修改的是src目录，还是dist(build)目录？build就是最终的成品的存放位置，dist是中间层面的js，看不见摸不到，但实际上起作用的文件都在这里。
• 参数是在哪个配置文件里面改的？
• 究竟执行了哪条构建命令？
• 如果直接执行electron-builder或者electron-packager打包的话，vue渲染到dist目录了么？
• 一些特殊的文件，是不是被打包到asar里面了？
• 空白的话，看报错信息了么？调试时和生产模式下的node_modules文件夹是不一样的，您意识到了么？
• 调试时和打包的时候，electron可能是不同版本的，您意识到了么？调试的时候，很可能使用的是你全局安装的electron，而打包的时候，打包参数里面，是可以指定electron的特殊版本号的。您意识到了么？

更多electron的经验文字，请点击苏南大叔的精彩文章：https://newsn.net/tag/electron/ 。

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