Cara menggunakan vue3+ts+vite+electron untuk membina aplikasi desktop

1. Pengenalan latar belakang versi

vite: ^4.2.0
vue: ^3.2.47
ts: ^4.9.3
elektron: ^23.2.1

2. Proses

1 Bina projek vite+vue-ts

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

2 pesanan Pastikan elektron boleh dipasang seperti biasa, buat

, dan tetapkan sumber imej elektron

vuets_electron

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

Salin selepas log masuk

.npmrc

Pasang pakej berkaitan elektron

# 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

Salin selepas log masuk

3. Permulaan elektron

Buat fail proses utama elektron main.ts: /src/main/main.ts

rreee

Laraskan arahan permulaan: package.json

2 Bagaimana untuk memulakan elektron Dari dokumentasi elektron rasmi, kita dapat mengetahui dengan jelas bahawa elektron boleh memuatkan URL, kemudian kita boleh memulakan vue sebelum memulakan elektron, dan kemudian Tidakkah ia cukup untuk menyambungkan pintu masuk akses vue kepada elektron dan memulakan elektron pada masa yang sama~

3 Jangan lupa untuk menetapkan fail masuk~~~

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

Salin selepas log masuk

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

1 Pek vue

3 Pek elektron supaya kita boleh mendapatkan pakej pemasangan yang lengkap

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

Salin selepas log masuk

vite.config.ts pelarasan

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

Salin selepas log masuk

src/main/main.ts pelarasan

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

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

Salin selepas log masuk

5. Pengisihan Direktori Projek

Untuk membezakan dengan jelas proses utama dan proses pemaparan elektron, kami boleh menyusun fail berkaitan vue ke dalam direktori pemaparan

Berikut ialah struktur direktori saya, anda boleh Rujukan

移动vue相关文件，请务必注意vue相关引用的路径问题

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

Salin selepas log masuk

3. Halaman utama pembungkusan memuatkan isu kosong (tambahan)至此 我们的electron开发框架就搭建完成了，可以愉快的撸代码了~

Jika projek menggunakan vue -penghala, kami akan membina Selepas menjalankan exe, anda akan menemui halaman utama

Jika anda menggunakan

untuk membuat laluan, anda boleh menukarnya kepada 白屏. hashcreateWebHistory()

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

Salin selepas log masuk

Atas ialah kandungan terperinci Cara menggunakan vue3+ts+vite+electron untuk membina aplikasi desktop. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!