So erstellen Sie mit vue3+ts+vite+electron eine Desktop-Anwendung

1. Versionshintergrund-Einführung

vite: ^3.2.47
ts: ^4.9.3
electron: ^23.2.1

2. Prozess

1 -ts project

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

2. Mit Electron verbinden

Um sicherzustellen, dass Electron normal installiert werden kann, erstellen Sie .npmrc im Stammverzeichnis von vuets_electron und legen Sie es fest Up Electron Mirror Source

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

vuets_electron 的根目录下创建.npmrc, 设置一下electron的镜像源

# 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

安装electron相关的包

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()
})

3. electron启动

创建electron主进程文件main.ts: /src/main/main.ts

{
	"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 .\""
		// +++
	}
	// ...
	// 其它配置
}

调整启动命令：package.json
1 vue 启动： yarn dev
2 那electron要如何启动呢? 从electron官方文档我们可以清楚的知道，electron可以加载URL，那么我们就可以在启动electron之前启动vue，然后将vue的访问入口接入electron，在同时启动electron不就可以了吗~
3 千万不要忘了设置入口文件哟~~~

# 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官方文档
	}
}

到这，我们运行 yarn electron:dev 就能看到熟悉的electron页面了

4. electron打包

1 打包vue
2 将vue的入口文件接入electron
3 打包electron这样我们就能得到完整的安装包

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

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

vite.config.ts调整

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()
})

src/main/main.ts 调整

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
│       │   ...

5. 项目目录梳理

为了清晰的区分electron的主进程和渲染进程，我们可以将vue相关的文件规整到render的目录下 移动vue相关文件，请务必注意vue相关引用的路径问题
如下是本人的目录结构，可参考

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

至此 我们的electron开发框架就搭建完成了，可以愉快的撸代码了~

三、打包首页加载空白问题(补充)

如果项目使用了vue-router，我们在build后运行exe，会发现首页白屏，这是因为 electron 仅支持hash模式，如果使用了createWebHistory()创建路由，可更改为createWebHashHistory()

Elektronenbezogene Pakete installieren

🎜rrreee🎜3. Electron-Startup🎜🎜🎜Erstellen Sie die Electron-Hauptprozessdatei main.ts: /src/main/main.ts🎜🎜rrreee🎜🎜Passen Sie die an Startbefehl: Paket .json🎜1 Vue-Startup: Garn dev🎜2 Wie starte ich Electron? Aus der offiziellen Electron-Dokumentation können wir eindeutig erkennen, dass Electron die URL laden kann. Dann können wir Vue starten, bevor Electron gestartet wird, und dann festlegen Vue-Zugriffseingang Verbinden Sie sich mit Electron und starten Sie Electron gleichzeitig, oder?~🎜3 Vergessen Sie nicht, die Eingabedatei festzulegen~~~🎜🎜rrreee🎜An diesem Punkt führen wir Yarn Electron:dev und Sie aus Sie können die bekannte Electron-Seite sehen🎜🎜4. Electron-Verpackung🎜🎜🎜1 Vue packen🎜2 Vue-Eintragsdatei mit Electron verbinden🎜3 Electron packen, damit wir das komplette Installationspaket erhalten können🎜🎜rrreee🎜🎜vite. config .ts-Anpassung🎜🎜rrreee🎜🎜src/main/main.ts-Anpassung🎜🎜rrreee🎜5. Sortierung des Projektverzeichnisses🎜🎜🎜Um den Hauptprozess und den Rendering-Prozess von Electron klar zu unterscheiden, können wir vue-bezogene Dateien organisieren in render Verschieben Sie Vue-bezogene Dateien in das Verzeichnis. Achten Sie bitte unbedingt auf das Pfadproblem der Vue-bezogenen Referenzen🎜Das Folgende ist meine Verzeichnisstruktur, auf die Sie verweisen können🎜🎜rrreee🎜 Zu diesem Zeitpunkt ist unser Elektronenentwicklungs-Framework fertig. Jetzt können Sie problemlos codieren~🎜🎜3. Problem beim Laden der Verpackungshomepage (ergänzend)🎜🎜🎜Wenn das Projekt Vue-Router verwendet, führen wir die Exe nach dem Erstellen aus , und wir werden feststellen, dass die Homepage weiß ist. Dies liegt daran, dass Electron nur den <code>hash-Modus unterstützt, wenn Sie zum Erstellen createWebHistory() verwenden Wenn Sie eine Route erstellen, können Sie sie in createWebHashHistory() >Das ist es🎜🎜rrreee ändern

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit vue3+ts+vite+electron eine Desktop-Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!