Note: electron-vue is not quite active recently. This is just for record

Process relationship

https://www.plantuml.com/plantuml/umla/SoWkIImgAStDuOeEIirBIIrABOhbYlPDpCm3Kk7vHTaWFfASWgwT0aJQIY4ejR0qjRW4eXmi0zE1a8COWg6nk20_hpWLIIVS1cHf1w0Oq6a0

Process structure

root/
+-.electron-vue/
| \-webpack.main.config.js
+-dist/
\-src/
  +-main/
  | \-index.js
  +-renderer/
  \-worker/
    \-worker.js

Create worker

Edit index.js

import { fork } from 'child_process'
 
const workerPath = process.env.NODE_ENV === 'development'
  ? 'worker/worker.js'
  : join(__dirname, 'worker/worker.js')
const worker = fork(workerPath)

Communication between processes

Renderer process

import { ipcRenderer } from 'electron'
 
ipcRenderer.send('channel-name', data) // Send request via Electron IPC
ipcRenderer.on('channel-name', (event, data) => {}) // Receive response via Electron IPC

Main process

import { ipcMain } from 'electron'
 
ipcRenderer.on('channel-name', (event, data) => {}) // Receive request via Electron IPC
worker.send({event: 'event-name', data}) // Send request via Node.js IPC
worker.on('message', (msg) => { // Receive response via Node.js IPC
  const {event, data} = msg
  mainWindow.webContents.send(event, data) // Send response via Electron IPC
}

Worker process

process.on('message', (msg) => { // Receive request via Node.js IPC
  const {event, data} = msg
  // Process request
})
process.send({event: 'event-name', data})

Production configuration

Webpack configuration

Edit webpack.main.conofig.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
 
if (process.env.NODE_ENV === 'production') {
  mainConfig.plugins.push(
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../src/worker'),
        to: path.join(__dirname, '../dist/electron/worker'),
        ignore: ['.*']
      }
    ])
  )
}

Asar configuration

child_process.fork() cannot be used with a script packed in app.asar. Edit package.json

"build": {
  "win": {
    "asarUnpack": [
      "dist/electron/worker/worker.js"
    ]
  }
}