Vite + Vue. 3.0 + electron integration to build desktop app application

Time:2022-5-18

Vite + Vue. 3.0 + electron integration to build desktop app application

environment

Node.js >=12.0.0
Vite has been installed. The installation method can be Baidu
Install yarn (optional) (the yarn command used in the following steps is executed, and NPM or cnpm can convert the command by itself)

1. Create vite project of Vue template

yarn create @vitejs/app my-vue-app --template vue
Vite + Vue. 3.0 + electron integration to build desktop app application

image.png
cd my-vue-app
yarn
yarn dev
Vite + Vue. 3.0 + electron integration to build desktop app application

image.png

Current project directory structure

Vite + Vue. 3.0 + electron integration to build desktop app application

image.png

2. Install relevant electronic modules

yarn add electron -D

3. Add files needed by electron

The following files are required for electron and need to be created manually

  1. main.js
  2. preload.js

Current project directory structure

Vite + Vue. 3.0 + electron integration to build desktop app application

image.png

PS: main. JS and preload JS content can be copied directlyelectron-quick-startproject
preload. JS does not need to be modified
main. JS needs to modify the loading address of browserwindow (dist directory is the directory after Vue build)

mainWindow. Change LoadFile ('index. HTML ') to MainWindow loadFile('dist/index.html')

4. Modify vite project configuration file

Modify vite config. JS file to configure the root path of APP project

base: path.resolve(__dirname, './dist')
Vite + Vue. 3.0 + electron integration to build desktop app application

image.png

5. Modify package json

  1. Electron mainentry configuration

  2. Electronic startup script configuration

     "main": "main.js",
     "electron:start": "vite build & electron ."
    
Vite + Vue. 3.0 + electron integration to build desktop app application

image.png

It’s done (the source code has been put into GitHub:electron-quick-start )

Vite + Vue. 3.0 + electron integration to build desktop app application

image.png

Follow up supplement

1. Distinguish between publishing and development environment (hotreload)
Judge the environment and officially package: MainWindow loadFile(‘index.html’)
Development and debugging: MainWindow loadURL(http://localhost:3000/)