在本文中，我們將研究如何通過(guò) Vite 開發(fā) Vue 3 桌面項(xiàng)目。

在項(xiàng)目中會(huì)用到 Electron ， 一種最流行的框架，可使用Javascript構(gòu)建跨平臺(tái)的桌面應(yīng)用程序。 因此，許多受歡迎的應(yīng)用程序都在使用Electron，例如VSCode，Slack，Twitch等。

先看看要做什么：

盡管這只是一個(gè) Vite 的基本模板，但它跑在專用程序而不是瀏覽器中。 這是構(gòu)建自己的桌面應(yīng)用的必要步驟。

以下是開發(fā)過(guò)程。

創(chuàng)建的基本 Vite 程序

首先創(chuàng)建 Vite 應(yīng)用。 在這里不會(huì)過(guò)多介紹 Vite 的工作原理。

在終端下執(zhí)行以下命令：

npm init @vitejs/appcd [project-name]npm install

完成了，先在瀏覽器中試一下。

在終端中簡(jiǎn)單的運(yùn)行 npm run dev 命令。然后在瀏覽器中打開本機(jī)地址，可以看到是這樣的：

沒有問(wèn)題，接著就該把 Electron 添加到它的設(shè)置中了。

在 Vite 項(xiàng)目中添加 Electron

這里按照 Electron 官方的 quick start 在我們的 Vite 應(yīng)用中進(jìn)行一些調(diào)整。

首先安裝 Electron。在終端下輸入以下命令：

Install Electronnpm install --save-dev electron

接著再看一下 Electron 手冊(cè)。

手冊(cè)上說(shuō)簡(jiǎn)單的 Electron 配置需要四個(gè)文件：

package.json —— 這個(gè)已經(jīng)有了 main.js preloader.js index.html

看上去項(xiàng)目中已經(jīng)有了 main.js和index.html文件，但它們是 Vite 的文件，而不是 Electron 的文件。 Vite 的文件只能用于運(yùn)行 Vite 程序，所以還需要提供單獨(dú)的 Electron 文件。

main.js 用于創(chuàng)建桌面程序并加載到 index.html 中，它還應(yīng)該包括我們構(gòu)建的 Vite 程序代碼。

構(gòu)建 Vite 程序

所以首先必須構(gòu)建 Vite 程序。 因?yàn)橐阉c Electron 進(jìn)行整合，所以還需要做一些額外的配置。我們要確保在構(gòu)建項(xiàng)目時(shí)，對(duì)最終 javascript 和 css 文件的所有引用都指向正確的路徑。

要構(gòu)建的 Vite 項(xiàng)目將會(huì)創(chuàng)建以下結(jié)構(gòu)的 dist 目錄。

但是由于我們的 Electron 代碼位于項(xiàng)目的根目錄中，所以應(yīng)該將整個(gè)項(xiàng)目的基礎(chǔ)設(shè)置為 dist 文件夾。 可以通過(guò) path 庫(kù)在 vite.config.js 文件中設(shè)置 base 屬性來(lái)實(shí)現(xiàn)。

//vite.config.jsimport { defineConfig } from ’vite’import vue from ’@vitejs/plugin-vue’const path = require(’path’)// https://vitejs.dev/config/export default defineConfig({ base: path.resolve(__dirname, ’./dist/’), plugins: [vue()]})

現(xiàn)在可以在終端中運(yùn)行 npm run build 來(lái)創(chuàng)建 dist 目錄了。

設(shè)置 Electron 的 main.js

下一步是在項(xiàng)目的根目錄中創(chuàng)建 main.js 文件。

創(chuàng)建完畢后我們只需要從 Electron quick start guide 中復(fù)制粘貼代碼就行了。

在我們加載 index.html 的地方，要將其改為 dist/index.html，以便在 dist 目錄中使用該文件。

所以 main.js 中的最終代碼是這樣：

//main.jsconst { app, BrowserWindow } = require(’electron’)const path = require(’path’)function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, ’preload.js’) } }) 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() }})創(chuàng)建并編寫 preload.js.

接下來(lái)讓在項(xiàng)目根目錄中創(chuàng)建 preload.js 文件，然后再次使用quick start code，這次不必修改任何內(nèi)容。

//preload.jswindow.addEventListener(’DOMContentLoaded’, () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const type of [’chrome’, ’node’, ’electron’]) { replaceText(`${type}-version`, process.versions[type]) }})修改 package.json

差不多快要完成了，最后還需要對(duì) package.json文件進(jìn)行一些修改，以便運(yùn)行 Electron 命令。

首先要設(shè)置 main 屬性，在默認(rèn)情況下，Electron 會(huì)在根目錄中查找 index.js 文件并執(zhí)行，但是由于我們的文件名為 main.js，所以需要在 package.json 中定義。

//package.json{ 'name': 'vite-electron', 'version': '0.0.0', 'main': 'main.js', // 這一行 ...}

然后設(shè)置運(yùn)行 Electron 的方式，在 scripts 部分中新創(chuàng)建一個(gè)名為electron:start 的腳本，內(nèi)容是electron . 。

//package.json{ 'name': 'vite-electron', 'version': '0.0.0', 'main': 'main.js', 'scripts': { 'dev': 'vite', 'build': 'vite build', 'serve': 'vite preview', 'electron:start': 'electron .' // 這里 }, ...}

以上就是所有的代碼了。

最后在終端中執(zhí)行： npm run electron:start 命令，然后就能看到：

桌面程序終于完成了，很簡(jiǎn)單吧～

寫在最后

近期在提升 Vue 的過(guò)程中，發(fā)現(xiàn)一個(gè)高逼格的 Vue3+TS 教程。 無(wú)償分享給掘仔們，戳我看教程

到此這篇關(guān)于構(gòu)建Vue3桌面應(yīng)用程序的方法的文章就介紹到這了,更多相關(guān)Vue3桌面應(yīng)用程序內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！