Comment utiliser vue3+ts+vite+electron pour créer une application de bureau

1. Introduction à l'arrière-plan de la version

vite : ^4.2.0
vue : ^3.2.47
ts : ^4.9.3
électron : ^23.2.1

2. -ts project

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

2. Connectez-vous à electronic

Afin de vous assurer qu'electron peut être installé normalement, créez .npmrc dans le répertoire racine de vuets_electron et définissez up electronic 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()

Installer les packages liés à Electron

🎜rrreee🎜3 Démarrage d'Electron🎜🎜🎜Créez le fichier de processus principal d'Electron main.ts : /src/main/main.ts🎜🎜rrreee🎜🎜Ajustez le Commande de démarrage : package .json🎜1 vue startup : Yarn dev🎜2 Comment démarrer Electron ? D'après la documentation officielle d'Electron, nous pouvons clairement savoir qu'Electron peut charger une URL, puis nous pouvons démarrer vue avant de démarrer Electron, puis définir la vue. accéder à l'entrée Connectez-vous à Electron et démarrez Electron en même temps, n'est-ce pas ?~🎜3 N'oubliez pas de définir le fichier d'entrée~~~🎜🎜rrreee🎜À ce stade, nous lançons Yarn Electron:dev et vous pouvez voir la page électronique familière🎜🎜4. Packaging Electron🎜🎜🎜1 Pack vue🎜2 Connectez le fichier d'entrée de vue à electronic🎜3 Pack electron afin que nous puissions obtenir le package d'installation complet🎜🎜rrreee🎜🎜vite.config .ts ajustement🎜🎜rrreee🎜🎜src/main/main.ts ajustement🎜🎜rrreee🎜5. Tri du répertoire du projet🎜🎜🎜Afin de distinguer clairement le processus principal et le processus de rendu d'électron, nous pouvons organiser les fichiers liés à la vue en render Déplacez les fichiers liés à vue dans le répertoire, assurez-vous de faire attention au problème de chemin des références liées à vue🎜Ce qui suit est ma structure de répertoires, vous pouvez vous référer à🎜🎜rrreee🎜À à ce stade, notre cadre de développement électronique est terminé. Maintenant, vous pouvez coder avec plaisir ~🎜🎜3. Problème de chargement de la page d'accueil de l'emballage (supplémentaire)🎜🎜🎜Si le projet utilise vue-router, nous exécutons l'exe après la construction, et nous constaterons que la page d'accueil est en écran blanc, c'est parce qu'Electron ne prend en charge que le mode hash si vous utilisez createWebHistory() pour créer un. route, vous pouvez le changer en createWebHashHistory() >C'est tout 🎜🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!