How to use vue3+ts+vite+electron to build a desktop application

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. Connect to electron

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

# /.npmrc 
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

Installation related to electron Package

# electron
yarn add -D electron
# electron-builder 用于打包
yarn add -D electron-builder
# electron-devtools-installer
yarn add -D electron-devtools-installer
# 为了保证后续步骤，这里在安装一个concurrently,
yarn add concurrently

3. Electron startup

Create electron main process file main.ts: /src/main/main.ts

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

const createWindow = () => {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		// webPreferences: {
		// 	preload: path.join(__dirname, 'preload.js')
		// }
	})
	// 加载vue url视本地环境而定，如http://localhost:5173
	win.loadURL('http://localhost:3000')
}

app.whenReady().then(() => {
	createWindow()
	app.on('activate', () => {
		if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
})

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') app.quit()
})

Adjust startup command: package.json
1 vue startup: yarn dev
2 How to start electron? From the official electron documentation we can clearly know that electron can load URL, then we can Start vue before starting electron, and then connect the access entrance of vue to electron. Isn’t it enough 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",
	// +++ 增加入口
	"main": "src/main/main.js",
	// +++
	"scripts": {
		"dev": "vite",
		"build": "vue-tsc && vite build",
		"preview": "vite preview",
		// +++ 设置electron开发启动命令
		"electron:dev": "concurrently \"yarn dev\" \"electron .\""
		// +++
	}
	// ...
	// 其它配置
}

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

4. Electron packaging

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

# package.json

{
	"name": "vuets_electron",
	"private": true,
	"version": "1.0.0",
	"main": "src/main/main.js",
	// +++
	"scripts": {
		"dev": "vite",
		"build": "vue-tsc && vite build",
		"preview": "vite preview",
		"electron:dev": "concurrently \"yarn dev\" \"electron .\"",
		// +++ 设置electron打包命令
		"electron:build": "yarn build && electron-builder"
		// +++
	}
	// ...
	// 其它配置
	// +++ 打包相关设置
	"build": {
		"appId": "ink.bennent_g.demo",
		"directories": {
			"output": "output"
		},
		// 其它的build相关设置，可参考 electron-builder官方文档
	}
}

vite.config.ts adjustment

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

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

src/main/main.ts Adjustment

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

const createWindow = () => {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		// webPreferences: {
		// 	preload: path.join(__dirname, 'preload.js')
		// }
	})
	
	// +++ 开发环境与打包后加载vue入口文件有所区别
	// and load then index.html or the app
	if(process.env.npm_lifecycle_event === 'electron:dev') {
		win.loadURL('http://localhost:3000')
		win.webContents.openDevTools()
	} else {
		win.loadFile('dist/index.html')
	}
	// +++
}

app.whenReady().then(() => {
	createWindow()
	
	app.on('activate', () => {
		if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
})

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') app.quit()
})

5. Project directory sorting

In order to clearly distinguish the main process and rendering of electron process, we can organize 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, you can refer to

vuets_electron  // 项目名称
│ —— node_modules 
│ —— dist	// vue打包目录
│ —— output	// electron打包目录
│ —— public
│ —— .npmrc
│ —— package.json
│ —— vite.config.ts
│ —— tsconfig.json
│
└─── src // 开发相关目录
│   │  main.ts // vue默认入口文件
│   └───assets // 静态资源目录
│       │   ...
│   └───main // electron主进程目录
│       │   main.ts
│   └───render // 渲染进程目录即vue相关目录结构
│       │   router
│       │   views
│       │   ...

At this point, our electron development framework is completed, and we can happily write code~

3. Packaging home page loading blank issue (supplementary)

If the project uses vue-router, if we run the exe after building, we will find the homepagewhite screen. This is because electron only supports hash mode. If you use createWebHistory()Create route, can be changed to createWebHashHistory()

const router = createRouter({
	// history: createWebHistory(),
	// 修改为
	history: createWebHashHistory(),
	routes
})

The above is the detailed content of How to use vue3+ts+vite+electron to build a desktop application. For more information, please follow other related articles on the PHP Chinese website!