Set up the project

vue create vue3-electron
Copy the code

cd vue3-electron

vue add electron-builder
Copy the code

Select v13.0.0 Electron here:

Electron13 requires a node version > 14! Multi-player development recommended locking version, to avoid the pit between different versions!

Wait a moment:

yarn run electron:serve
Copy the code

pit

Electron installation failure

This is a problem most friends have.

Initial solution:

  1. Delete node_modules/electron
  2. Install again (YARN/CNPM / –registry registry.npmmirror.com/)

Sometimes they work, sometimes they don’t.

The final solution:

  1. Install. Js in the electron folder inside the node_modules folder
  2. Then open Terminal in this folder and type NPM install.js

Once this works, it’s almost done!

Packaging failure

MAC ICONS are packaged in ICNS format, and Windows images are packaged in ICO format

Here is a free and useful image format conversion tool: convert.72wo.com/icns-to-ico

Package configuration:

// vue.config.js

  pluginOptions: {

    electronBuilder: {

      builderOptions: {

        win: {

          icon: 'src/assets/img/icon.ico'

        },

        mac: {

          icon: 'src/assets/img/icon.icns'}}}}Copy the code

The electron Builder will detect whether there is a electron packet in the cache when packing. If not, it will pull the packet from Github. In the domestic network environment, the pull process will probably fail, so you can download a packet and put it in the cache directory.

Directory addresses for each platform

  • Linux: $XDG_CACHE_HOME or ~/.cache/electron/
  • MacOS: ~/Library/Caches/electron/
  • Windows: ~/AppData/Local/electron/Cache/

Download: github.com/electron/el…

Version number according to your own use of the version to download!

MAC package

MAC packaging checks whether there are signed keys in the environment and whether they are valid. If you don’t have one, skip it. If you don’t have one, skip it.

We don’t have any signature files at this stage, so we don’t have any experience to share.

Windows packaging

Windows packaging requires manual downloading of three files:

Github.com/electron-us…

Github.com/electron-us…

Github.com/electron-us…

If you try to download it while you’re packing, it almost always fails. Place them in the following paths:

The development of the pit

Blank screen after packing

  • Hash routing

  • publicPath: process.env.NODE_ENV === ‘production’ ? ‘/’, ‘/’,

The AXIos request failed

axios.defaults.adapter = require('axios/lib/adapters/http')
Copy the code

The network request module of Node must be forced to be used in the electron environment

Xcode can’t find

Sets xcode-select to the specified location

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
Copy the code

If you have multiple Xcodes installed, you only need to replace xcode.app.

Windows file path processing

Prior to ES9, \u represented Unicode escape, \x represented hexadecimal escape, and ‘ ‘followed by a number represented octal escape, which made it impossible to create specific strings, such as the Windows file path C:\uuu\ XXX \111.

String.raw `C:\Windows\System`

'C:\\Windows\\System'

String.raw `C:\Windows\System`

'C:\Windows\System'
Copy the code

Ipcrenderer. on Multiple times

Each time the ipcRenderer module is triggered, a new ipcRenderer is created, resulting in function blocks within the ipcRenderer being executed n times (depending on how many ipcrenderers are currently left).

Encapsulate server.js: (used by the server in the main process)

import { ipcMain } from 'electron'



const _map = new Map()



ipcMain.on('from-client'.(event, params) = > {

  const reply = function (data) {

    event.reply('from-server', {

      _symbol: params._symbol,

      // Data is passed to the client, and finally resolve it

      data

    })

  }

  const ctx = {

    reply,

    type: params.type

  }

  const cb = _map.get(params.type)

  if (typeof cb === 'function') {

    cb(ctx, params.data)

  } else {

    cb(ctx, 'Not registered ~')}})export default function server (type, callback) {

  _map.set(type, callback)

}
Copy the code

Encapsulate request.js :(request is used in the rendering process)

const { ipcRenderer } = window.require('electron')

const _map = new Map()

ipcRenderer.on('from-server'.(event, params) = > {

  const cb = _map.get(params._symbol)

  if (typeof cb === 'function') {

    _map.delete(params._symbol)

    cb(params.data)

  }

})



export default function request (type, data) {

  const _symbol = Date.now() + type

  return new Promise(resolve= > {

    _map.set(_symbol, (data) = > {

      resolve(data)

    })

    ipcRenderer.send('from-client', {

      _symbol: _symbol,

      type: type,

      data: data

    })

  })

}
Copy the code