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

electron-vue作为目前electron下最最火热的一个基础框架,但是在实际的操作中,很多新人会对这个框架的构建命令,有很多不大不小的误会,导致很多意料之外的情况发生。

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

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

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

既然带了个vue的字样,就肯定有其不同之处。所以,在electron-vue项目下,所有试图直接使用electron-packager或者electron-builder命令,进行项目构建的行为,都是错误的。这种情况下,很有可能你的问题是:为什么构建处理的页面是空白?为什么我的修改没有生效?

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

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

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

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

如何修改electron-packager参数

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

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

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

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

如何修改electron-builder参数

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

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

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

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

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

相关文章

总结

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

  • 修改的是src目录,还是dist(build)目录?
  • 参数是在哪个配置文件里面改的?
  • 究竟执行了哪条构建命令?
  • 如果直接执行electron-builder或者electron-packager打包的话,vue渲染到dist(build)目录了么?

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

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