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

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

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

如何深入理解electron-vue的build构建命令 - electron-vue
如何深入理解electron-vue的build构建命令(图9-1)

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

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

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

如何深入理解electron-vue的build构建命令 - package
如何深入理解electron-vue的build构建命令(图9-2)

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

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

如何修改electron-packager参数

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

如何深入理解electron-vue的build构建命令 - packager_00
如何深入理解electron-vue的build构建命令(图9-3)

如何深入理解electron-vue的build构建命令 - packager_01
如何深入理解electron-vue的build构建命令(图9-4)

如何深入理解electron-vue的build构建命令 - packager_02
如何深入理解electron-vue的build构建命令(图9-5)

如何修改electron-builder参数

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

如何深入理解electron-vue的build构建命令 - builder_1
如何深入理解electron-vue的build构建命令(图9-6)

如何深入理解electron-vue的build构建命令 - builder_2
如何深入理解electron-vue的build构建命令(图9-7)

如何深入理解electron-vue的build构建命令 - builder_3
如何深入理解electron-vue的build构建命令(图9-8)

如何深入理解electron-vue的build构建命令 - builder_4_config
如何深入理解electron-vue的build构建命令(图9-9)

相关文章

总结

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

  • 修改的是src目录,还是dist(build)目录?build是构建资源和配置,dist是分发包。
  • 参数是在哪个配置文件里面改的?
  • 究竟执行了哪条构建命令?
  • 如果直接执行electron-builder或者electron-packager打包的话,vue渲染到dist(build)目录了么?
  • 一些特殊的文件,是不是被打包到asar里面了?
  • 空白的话,看报错信息了么?dev和release的node_modules文件夹是不一样的,您意识到了么?

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

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

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

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

苏南大叔需要你的支持

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