electron 开发记录

判断是否开发环境

安装 electron-is-dev npm install electron-is-dev

// main.js

const isDev = require('electron-is-dev')

或者

// electron-is-dev 的源码

const electron = require('electron');

const app = electron.app || electron.remote.app;

const isEnvSet = 'ELECTRON_IS_DEV' in process.env;

const getFromEnv = parseInt(process.env.ELECTRON_IS_DEV, 10) === 1;

const isDev = isEnvSet ? getFromEnv : !app.isPackaged;

集成 vue-cli 开发

开发时主进程加载 http://localhost:8080/

打包时则加载 dist 文件夹下的 index.html

  if (isDev) {

    mainWindow.loadURL('http://localhost:8080')

    mainWindow.webContents.openDevTools()

  } else {

    mainWindow.loadURL(`file://${__dirname}/dist/index.html`)

  }

打包

electron-builder 开箱即用，但是安装包无路径选择等配置

Not allowed to load local resource

electron 有个 issue 有各种情况的解决方案。

但是注意 electron-builder 默认打包到 dist 文件夹下。打包后，也会报错 Not allowed to load local resource。这个是由于路径引用错误导致的。

解决方案是将 electron-builder 的路径修改为其他路径

// package.json

  "build": {

    "directories": {

      "output": "release"

    }

  }

渲染进程找不到 fs 及 path 模块

修改 webpack 的 target

{

    target: 'electron-renderer'

}

mac版无法粘贴复制

// main.js

  if (process.platform === 'darwin') {

    const template = [

      {

        label: "Application",

        submenu: [ { label: "退出", role: 'quit'} ]

      },

      {

        label: 'Edit',

        submenu: [

          { label: '撤销', role: 'undo' },

          { label: '恢复', role: 'redo' },

          { type: 'separator' },

          { label: '剪切', role: 'cut' },

          { label: '复制', role: 'copy' },

          { label: '粘贴', role: 'paste' },

          { label: '删除', role: 'delete' },

          { label: '全选', role: 'selectall' }

        ]

      }

    ]

    Menu.setApplicationMenu(Menu.buildFromTemplate(template))

  }