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:
- Delete node_modules/electron
- Install again (YARN/CNPM / –registry registry.npmmirror.com/)
Sometimes they work, sometimes they don’t.
The final solution:
- Install. Js in the electron folder inside the node_modules folder
- 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