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

dalam direktori akar

, 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/

.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

3. Permulaan elektron

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

rreee

Laraskan arahan permulaan: package.json

1 vue startup: yarn dev

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

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

1 Pek vue

2 Sambungkan fail kemasukan vue ke elektron

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

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

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
	}
	// ...
})

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

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

Ini kerana elektron hanya menyokong mod

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

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!