如何使用vue3+ts+vite+electron搭建桌面應(yīng)用

本文小編為大家詳細(xì)介紹“如何使用vue3+ts+vite+electron搭建桌面應(yīng)用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何使用vue3+ts+vite+electron搭建桌面應(yīng)用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、版本背景介紹

vite： ^4.2.0
vue: ^3.2.47
ts: ^4.9.3
electron: ^23.2.1

二、過(guò)程

1. 搭建vite+vue-ts的項(xiàng)目

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

2. 接入electron

為了保證electron能夠正常安裝，在 vuets_electron 的根目錄下創(chuàng)建.npmrc, 設(shè)置一下electron的鏡像源

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

安裝electron相關(guān)的包

# electron
yarn add -D electron
# electron-builder 用于打包
yarn add -D electron-builder
# electron-devtools-installer
yarn add -D electron-devtools-installer
# 為了保證后續(xù)步驟，這里在安裝一個(gè)concurrently,
yarn add concurrently

3. electron啟動(dòng)

創(chuàng)建electron主進(jìn)程文件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視本地環(huán)境而定，如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()
})

調(diào)整啟動(dòng)命令：package.json
1 vue 啟動(dòng)： yarn dev
2 那electron要如何啟動(dòng)呢? 從electron官方文檔我們可以清楚的知道，electron可以加載URL，那么我們就可以在啟動(dòng)electron之前啟動(dòng)vue，然后將vue的訪(fǎng)問(wèn)入口接入electron，在同時(shí)啟動(dòng)electron不就可以了嗎~
3 千萬(wàn)不要忘了設(shè)置入口文件喲~~~

{
	"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",
		// +++ 設(shè)置electron開(kāi)發(fā)啟動(dòng)命令
		"electron:dev": "concurrently \"yarn dev\" \"electron .\""
		// +++
	}
	// ...
	// 其它配置
}

到這，我們運(yùn)行 yarn electron:dev 就能看到熟悉的electron頁(yè)面了

4. electron打包

1 打包vue
2 將vue的入口文件接入electron
3 打包electron這樣我們就能得到完整的安裝包

# 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 .\"",
		// +++ 設(shè)置electron打包命令
		"electron:build": "yarn build && electron-builder"
		// +++
	}
	// ...
	// 其它配置
	// +++ 打包相關(guān)設(shè)置
	"build": {
		"appId": "ink.bennent_g.demo",
		"directories": {
			"output": "output"
		},
		// 其它的build相關(guān)設(shè)置，可參考 electron-builder官方文檔
	}
}

vite.config.ts調(diào)整

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 調(diào)整

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

const createWindow = () => {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		// webPreferences: {
		// 	preload: path.join(__dirname, 'preload.js')
		// }
	})
	
	// +++ 開(kāi)發(fā)環(huán)境與打包后加載vue入口文件有所區(qū)別
	// 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. 項(xiàng)目目錄梳理

為了清晰的區(qū)分electron的主進(jìn)程和渲染進(jìn)程，我們可以將vue相關(guān)的文件規(guī)整到render的目錄下 移動(dòng)vue相關(guān)文件，請(qǐng)務(wù)必注意vue相關(guān)引用的路徑問(wèn)題
如下是本人的目錄結(jié)構(gòu)，可參考

vuets_electron  // 項(xiàng)目名稱(chēng)
│ —— node_modules 
│ —— dist	// vue打包目錄
│ —— output	// electron打包目錄
│ —— public
│ —— .npmrc
│ —— package.json
│ —— vite.config.ts
│ —— tsconfig.json
│
└─── src // 開(kāi)發(fā)相關(guān)目錄
│   │  main.ts // vue默認(rèn)入口文件
│   └───assets // 靜態(tài)資源目錄
│       │   ...
│   └───main // electron主進(jìn)程目錄
│       │   main.ts
│   └───render // 渲染進(jìn)程目錄即vue相關(guān)目錄結(jié)構(gòu)
│       │   router
│       │   views
│       │   ...

至此 我們的electron開(kāi)發(fā)框架就搭建完成了，可以愉快的擼代碼了~

三、打包首頁(yè)加載空白問(wèn)題(補(bǔ)充)

如果項(xiàng)目使用了vue-router，我們?cè)赽uild后運(yùn)行exe，會(huì)發(fā)現(xiàn)首頁(yè)白屏，這是因?yàn)?electron 僅支持hash模式，如果使用了createWebHistory()創(chuàng)建路由，可更改為createWebHashHistory()即可

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

讀到這里，這篇“如何使用vue3+ts+vite+electron搭建桌面應(yīng)用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。