Create a vite project
npm init vite
Install the packaging tool
npm i -D electron // 20.1.0
npm i -D electron-builder // 23.3.3
Electron is a development-time running environment, and electron-builder is used for packaging exe.
Configure the desktop environment
Openelectron official website, find "Quick Start". Basically, after reading this chapter, you can run the page through the desktop program.
Create the main process
Create files and files in the project directory, and the code can be copied directly to the official website example
//
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: (__dirname, '')
}
})
// load ('')
// Open the development tool // ()
}
// This program will be initialized at Electron// Called when creating a browser window// Some APIs can only be used after the ready event is triggered.().then(() => {
createWindow()
('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (().length === 0) createWindow()
})
})
// Exit the program when all windows are closed except macOS. There, it's common// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
('window-all-closed', () => {
if ( !== 'darwin') ()
})
// In this file you can include the rest of your app's specific main process
// code. It can also be split into several files and then imported with require.//
// All the APIs are available in the preload process.
// It has the same sandbox as Chrome extensions.('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = (selector)
if (element) = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, [dependency])
}
})
Add electron to run command
Open Add electron to the scrpit object to run the command
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview",
"start": "electron .",
},
Package the project and generate dist
Run npm run build to generate the dist file. And modify the middle path to './dist/'
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: (__dirname, '/')
}
})
// load // ('')
('./dist/')
// Open the development tool // ()
}
Finally run npm run start
Solve the resource cannot be loaded
Finally, you will find that it is a white screen. Open the program console and you will see that the js file cannot be found. When I opened dist, I found that both js and css paths are absolute paths, so I need to modify them to relative paths here.
Open Configure the path to relative path
export default defineConfig({
plugins: [vue()],
base: './',
})
Then repackage, run npm run start and you will see the page.
Development environment: Hot update
There is a problem in the development environment here, that our rendering process here is a packaged dist file and cannot be hotly updated after each modification. The page will only be updated after repackaging and generating a new dist. This is obviously convenient when developing.
Two tools concurrently wait-on
npm i concurrently -D
npm i wait-on -D
- concurrently: convenient script to start multiple commands at the same time
- wait-on: It can be fired after files, ports, sockets, and http(s) resources are available.
When it comes to hot updates during development, we have to give up building a dist file as a rendering process. Simply put, we normally execute npm run dev to generate a page service, and such an environment has hot updates. So we just need to load the page in the dev service as the rendering process in the main process. Modify the main process
...
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: (__dirname, "/"),
},
});
// load ("http://localhost:3333/");
// Open the development tool // ()
};
...
Then open two terminals, the first one executes npm run dev first, and wait for the service to start and execute npm run start in the other one.
Of course we can also complete these with one command. Add commands in:
...
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview",
"start": "electron .",
"electron": "wait-on tcp:3333 && electron .",
"exe-dev": "concurrently -k \"npm run dev\" \"npm run electron\""
},
...
Exe-dev is executed during development.
Packaging exe
Add a package command
...
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview",
"start": "electron .",
"electron": "wait-on tcp:3333 && electron .",
"exe-dev": "concurrently -k \"npm run dev\" \"npm run electron\"",
"exe-build": "electron-builder"
},
...
Execute npm run exe-build and wait for the execution to end. There will be an additional win-unpacked in the dist folder, and there is an exe file inside it, which is our program execution file.
Now we are loading the dev service, so we need to modify the main process
...
// load // Determine whether it is currently a development environment ("isPackaged: ", );
if (!) {
("http://localhost:3333/");
} else {
("./dist/");
}
...
It is mainly used to determine whether it is a development environment.
Solve the problem that cannot be found
When we open win-unpacked, execute the exe file, we will find that the page has no content. When we open the F12 console, we will find that it is not found at all.
Its address is ...dist/win-unpacked/resources//dist/. You can guess the reason that cannot be found is that our page is not packaged.
So we can set the file we want to package in the electron-builder packaging configuration.
Project update directory creation
{
"files": ["", "", "./dist"],
"productName": "test"
}
Here we set the files field, the purpose of which is to set the packaged data content. productName is to set the file name of the exe file.
Then modify the exe-build command
"exe-build": "electron-builder -config "
After running the command, you can see that the exe file has been modified to. Double-click to run to see the page.
Finally, improve the packaging command
"exe-build": "vite build & electron-builder -config "
The above is the detailed explanation of the package configuration of vite + electron-builder. For more information about the package configuration of vite + electron-builder, please follow my other related articles!