vue3+ts+vite+electron to build desktop applications

Tip: After the article is finished, the directory can be automatically generated. How to generate it can refer to the help document on the right

vue3+ts+vite+electron to build desktop applications

Preface

Tip: When developing desktop applications, we have to mention Electron. We used vue+electron before, and the official provided Vue CLI Plugin Electron Builder, but we can only use vue-cli (and built with vue-cli-electron-builder. I found that the latest version is only 13, and the latest version of Electron is 23😅😅😅). With the rise of vite and ts, we also need to keep pace with the times, right?

1. Version background introduction

vite： ^4.2.0
vue: ^3.2.47
ts: ^4.9.3
electron: ^23.2.1

2. Process

1. Build a vite+vue-ts project

yarn create vite@ vuets_electron --template vue-ts
cd ./vuets_electron
yarn install && yarn dev

2. Access to electron

In order to ensure that the electron can be installed normally,vuets_electron Created in the root directory.npmrc, set the image source of electron

# /.npmrc 
ELECTRON_MIRROR=/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=/mirrors/electron-builder-binaries/

Install electron-related packages

# electron
yarn add -D electron
# electron-builder for packagingyarn add -D electron-builder
# electron-devtools-installer
yarn add -D electron-devtools-installer
# To ensure the next steps, here is a concurrently installed,yarn add concurrently

For details, please refer toconcurrently

3. Electron start

Create the electron main process file: /src/main/

const { app, BrowserWindow } = require('electron')

const createWindow = () =&gt; {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		// webPreferences: {
		// 	preload: (__dirname, '')
		// }
	})
	// Loading the vue url depends on the local environment, such as http://localhost:5173	('http://localhost:3000')
}

().then(() =&gt; {
	createWindow()
	('activate', () =&gt; {
		if (().length === 0) createWindow()
	})
})

('window-all-closed', () =&gt; {
	if ( !== 'darwin') ()
})

Adjust the startup command:
1 vue start: yarn dev
2 How to start electron? From the official electron document, we can clearly know that electron can load the URL. Then we can start vue before starting electron, and then connect the access portal of vue to electron. Isn’t it okay to start electron at the same time?
3 Don’t forget to set the entry file~~~

{
	"name": "vuets_electron",
	"private": true,
	"version": "1.0.0",
	// +++ Add entrance	"main": "src/main/",
	// +++
	"scripts": {
		"dev": "vite",
		"build": "vue-tsc &amp;&amp; vite build",
		"preview": "vite preview",
		// +++ Set the electron development startup command		"electron:dev": "concurrently \"yarn dev\" \"electron .\""
		// +++
	}
	// ...
	// Other configurations}

At this point, we can see the familiar electron page by running yarn electron:dev

4. Electron Packaging

1 Package vue
2 Connect the vue entry file to electron
3 Packing electron so that we can get a complete installation package

# 

{
	"name": "vuets_electron",
	"private": true,
	"version": "1.0.0",
	"main": "src/main/",
	// +++
	"scripts": {
		"dev": "vite",
		"build": "vue-tsc &amp;&amp; vite build",
		"preview": "vite preview",
		"electron:dev": "concurrently \"yarn dev\" \"electron .\"",
		// +++ Set the electron packaging command		"electron:build": "yarn build &amp;&amp; electron-builder"
		// +++
	}
	// ...
	// Other configurations	// +++ Package related settings	"build": {
		"appId": "ink.bennent_g.demo",
		"directories": {
			"output": "output"
		},
		// For other build-related settings, please refer to the electronic-builder official document	}
}

Adjustment

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// /config/
export default defineConfig({
	plugins: [
		vue(),
	],
	// +++
	base: './',
	// +++
	server: {
		port: 3000
	}
	// ...
})

src/main/ Adjustment

const { app, BrowserWindow } = require('electron')

const createWindow = () =&gt; {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		// webPreferences: {
		// 	preload: (__dirname, '')
		// }
	})
	
	// +++ There is a difference between the development environment and the vue entry file loading after packaging	// and load then  or the app
	if(.npm_lifecycle_event === 'electron:dev') {
		('http://localhost:3000')
		()
	} else {
		('dist/')
	}
	// +++
}

().then(() =&gt; {
	createWindow()
	
	('activate', () =&gt; {
		if (().length === 0) createWindow()
	})
})

('window-all-closed', () =&gt; {
	if ( !== 'darwin') ()
})

5. Project catalog sorting

In order to clearly distinguish the main process of electron and the rendering process, we can sort the vue-related files into the render directoryMove vue-related files, please be sure to pay attention to the path issues of vue-related references
The following is my directory structure, please refer to

vuets_electron  // Project name│ —— node_modules 
│ —— dist	// vue packaging directory│ —— output	// electron packaging directory│ —— public
│ —— .npmrc
│ —— 
│ —— 
│ —— 
│
└─── src // Development related catalog│   │   // vue default entry file│   └───assets // Static resource directory│       │   ...
│   └───main // electron main process directory│       │   
│   └───render // Rendering process directory, i.e. vue-related directory structure│       │   router
│       │   views
│       │   ...

At this point, our electron development framework has been built and you can read the code happily~

3. Packaging home page loading blank issue (supplement)

If the project uses vue-router, we run exe after building and will find the home pageWhite screen, this is because electron only supportshashMode, if usedcreateWebHistory()Create a route that can be changed tocreateWebHashHistory()Just

const router = createRouter({
	// history: createWebHistory(),
	// Modify to	history: createWebHashHistory(),
	routes
})

This is the article about vue3+ts+vite+electron building desktop applications. For more related vue3+ts+vite+electron desktop application content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!