Vue CLI Plugin Electron Builder笔记

1.环境变量说明

vue.js中设置的【生产环境变量】和【线上环境变量】在electron打包是可用的

2.隐藏顶部菜单栏

3.使用electron-build在vue-cli 3中的使用

文档参考：https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#installation

安装完毕之后项目里会多出一些文件，其中有一个background.js，关于页面的东西需要去这个当中改

注意事项:node版本必须高于8.12，升级node版本后可以后导致node-sass这个模块的不可用，需要执行【npm rebuild node-sass】去重新绑定

4.窗口宽与高的固定

win = new BrowserWindow({

    width: 400,

    height: 750,

    maxHeight:750,

    maxWidth: 400,

    webPreferences: {

      nodeIntegration: true

    }

 });

4.应用打包后打开调试工具

方法一（主进程）：

function createWindow (){   

mainWindow = newBrowserWindow({

width:800, 

height:600

})

mainWindow.webContents.openDevTools()

}

方法二（渲染进程）：

const { remote } = require('electron')

remote.getCurrentWebContents().openDevTools()

6.替换图标

1.把图标放在public文件下

2.安装

yarn add --dev electron-icon-builder（需要科学上网）

3.添加命令：

"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"

4.生成：

yarn electron:generate-icons

5.会生成build文件，不要动

6.修改配置

7.打包配置（科学上网很重要啊）

参考文章：https://www.jianshu.com/p/1dbb96bc8f37
参考文档：https://www.electron.build/configuration/configuration

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "com.example.app",
        productName: "hsl-Download", //项目名，也是生成的安装文件名，即hsl-Download
        copyright: "Copyright © 2019", //版权信息
        directories: {
          output: "./dist" //输出文件路径
        },
        win: {
          //win相关配置
          target: [
            {
              target: "nsis", //利用nsis制作安装程序
              arch: [
                "x64", //64位
                "ia32" //32位
              ]
            }
          ]
        },
        nsis: {
          oneClick: false, // 是否一键安装
          allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: "./static/icon.ico", // 安装图标
          uninstallerIcon: "./static/icon.ico", //卸载图标
          installerHeaderIcon: "./static/icon.ico", // 安装时头部图标
          createDesktopShortcut: true, // 创建桌面图标
          createStartMenuShortcut: true, // 创建开始菜单图标
          shortcutName: "hsl-Download" // 图标名称
        }
      }
    }
  }
};

8.注意事项

1.mac版本必须在mac电脑电脑上打包

9.遇到的错误

1.打包时项目路径中不能有中文。报错如下：

losetime