在本文中，我們將研究如何通過 Vite 開發 Vue 3 桌面項目。

在項目中會用到 Electron ， 一種最流行的框架，可使用Javascript構建跨平臺的桌面應用程序。 因此，許多受歡迎的應用程序都在使用Electron，例如VSCode，Slack，Twitch等。

先看看要做什么：

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

以下是開發過程。

創建的基本 Vite 程序

首先創建 Vite 應用。 在這里不會過多介紹 Vite 的工作原理。

在終端下執行以下命令：

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

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

在終端中簡單的運行 npm run dev 命令。然后在瀏覽器中打開本機地址，可以看到是這樣的：

沒有問題，接著就該把 Electron 添加到它的設置中了。

在 Vite 項目中添加 Electron

這里按照 Electron 官方的 quick start 在我們的 Vite 應用中進行一些調整。

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

Install Electronnpm install --save-dev electron

接著再看一下 Electron 手冊。

手冊上說簡單的 Electron 配置需要四個文件：

package.json —— 這個已經有了 main.js preloader.js index.html

看上去項目中已經有了 main.js和index.html文件，但它們是 Vite 的文件，而不是 Electron 的文件。 Vite 的文件只能用于運行 Vite 程序，所以還需要提供單獨的 Electron 文件。

main.js 用于創建桌面程序并加載到 index.html 中，它還應該包括我們構建的 Vite 程序代碼。

構建 Vite 程序

所以首先必須構建 Vite 程序。 因為要把它與 Electron 進行整合，所以還需要做一些額外的配置。我們要確保在構建項目時，對最終 javascript 和 css 文件的所有引用都指向正確的路徑。

要構建的 Vite 項目將會創建以下結構的 dist 目錄。

但是由于我們的 Electron 代碼位于項目的根目錄中，所以應該將整個項目的基礎設置為 dist 文件夾。 可以通過 path 庫在 vite.config.js 文件中設置 base 屬性來實現。

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

現在可以在終端中運行 npm run build 來創建 dist 目錄了。

設置 Electron 的 main.js

下一步是在項目的根目錄中創建 main.js 文件。

創建完畢后我們只需要從 Electron quick start guide 中復制粘貼代碼就行了。

在我們加載 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() }})創建并編寫 preload.js.

接下來讓在項目根目錄中創建 preload.js 文件，然后再次使用quick start code，這次不必修改任何內容。

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

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

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

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

然后設置運行 Electron 的方式，在 scripts 部分中新創建一個名為electron:start 的腳本，內容是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 .' // 這里 }, ...}

以上就是所有的代碼了。

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

桌面程序終于完成了，很簡單吧～

寫在最后

近期在提升 Vue 的過程中，發現一個高逼格的 Vue3+TS 教程。 無償分享給掘仔們，戳我看教程

到此這篇關于構建Vue3桌面應用程序的方法的文章就介紹到這了,更多相關Vue3桌面應用程序內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！