打包模块

打包说明

vue.config.js -> pluginOptions

yarn build -> 输出 dist

受限于环境及依赖包问题,macOs 和 linux 系统未打包

    electronBuilder: {
      builderOptions: {
        appId: 'com.example.app',
        productName: '加菲猫视频',
        directories: {
          buildResources: './build',
          output: './dist'
        },
        win: {
          //win相关配置
          icon: './build/icon.png', //图标,当前图标在根目录下,注意这里有两个坑
          target: [
            {
              target: 'nsis', //利用nsis制作安装程序,
              arch: [
                'x64', //64位
                'ia32' //32位
              ]
            }
          ]
        },
        nsis: {
          allowToChangeInstallationDirectory: true,
          oneClick: false
        }
      }
    }

优缺点分析

优点:

除了不同平台 Native APIs 不同以外,Node.js 和 Chromium 都是跨平台的工具,这也为 electron 生来就能做跨平台的应用开发打下基础。得益于 Chromium,开发的障碍降低,社区成熟,维护团队活跃。

缺点:

应用体积过大。由于内部包装了 Chromium 和 Node.js,使得打包体积(使用 electron-builder)在 mac 上至少是 45M+起步,在 windows 上稍微好一点,不过也要 35M+起步。不过相比早期打包体积 100M+起步来说,已经好了不少。不过解压后安装依然是 100M+起步。 受限于 Node.js 和 Native APIs 的一些支持度的问题,它依然有所局限。一些功能依然无法实现。比如无法获取在系统文件夹里选中的文件,而必须调用 web 的 File 或者 node 的 fs 接口才可以访问系统文件。 应用性能依旧是个问题。所以做轻量级应用没问题,重量级应用尤其是 CPU 密集型应用的话很是问题。

优化方案

参照大佬开源的小巧浏览器控件miniblink,支持 electron 模式,后续可以尝试打造 35M+的应用

上次更新: 12/13/2019, 2:01:05 PM