Vite+Electron快速構建VUE3桌面應用的實現
一. 簡介
首先,介紹下vite和Electron。
- Vite是一種新型前端構建工具,能夠顯著提升前端開發體驗。由尤大推出,其發動態表示“再也回不去webpack瞭…”
- Electron是一個使用 JavaScript、HTML 和 CSS 構建桌面應用程序的框架。 嵌入Chromium和Node.js到二進制的 Electron 允許您保持一個 JavaScript 代碼代碼庫並創建 在Windows上運行的跨平臺應用 macOS和Linux——不需要本地開發 經驗。
當開始想用vue去開發一個桌面應用時,首先去搜索下,瞭解到當前如下兩種現成方案:
- electron-vue: 該項目集成度較好,封裝較為完整,中文搜索下來文章較多也是該方案,可以直接上手去使用。但是,問題在於其內置electron的版本太低,寫文章時看到的版本是2.0.4,而最新的electron版本是15.1.2。
- Vue CLI Plugin Electron Builder: 該方案是集成到到vue-cli中使用,使用vue add electron-builder後可直接上手,免去瞭基礎配置的步驟。但是其隻能在vue-cli下使用,無法配合vite來使用。
因此,若要使用vite和electron,還需要自己來配置。
二. 創建一個Vite項目
1. 安裝 vite
yarn create vite
2. 創建項目
創建命令如下:
yarn create vite <your-vue-app-name> --template vue
此處創建一個項目,名為kuari。
yarn create vite kuari --template vue
3. 進入且運行
進入項目,在運行前需要先安裝下依賴。
cd kuari yarn install yarn dev
在運行命令敲下的一瞬間,幾乎是已經在運行瞭,不愧是vite。此時按照輸出,打開地址預覽,即可看到初始化頁面。
至此一個基礎的vite項目創建完成。
三. 配置Electron
1. 官方文檔
在Electron官網的快速入門文檔中,有官方給出的利用html、javascript、css來創建一個electron應用的案例,vite+electron的方案也借鑒其中。
2. 安裝
首先安裝electron至vite應用。目前electron的版本為^15.1.2,。
yarn add --dev electron
3. 配置文件
1)vite.config.js
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // 新增 // https://vitejs.dev/config/ export default defineConfig({ base: path.resolve(__dirname, './dist/'), // 新增 plugins: [vue()] })
2)main.js
創建一個新的文件main.js,需要註意的是,該內容中index.html的加載路徑跟electron官網給的配置不同。
// main.js // 控制應用生命周期和創建原生瀏覽器窗口的模組 const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 創建瀏覽器窗口 const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) // 加載 index.html mainWindow.loadFile('dist/index.html') // 此處跟electron官網路徑不同,需要註意 // 打開開發工具 // mainWindow.webContents.openDevTools() } // 這段程序將會在 Electron 結束初始化 // 和創建瀏覽器窗口的時候調用 // 部分 API 在 ready 事件觸發後才能使用。 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 通常在 macOS 上,當點擊 dock 中的應用程序圖標時,如果沒有其他 // 打開的窗口,那麼程序會重新創建一個窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 除瞭 macOS 外,當所有窗口都被關閉的時候退出程序。 因此,通常對程序和它們在 // 任務欄上的圖標來說,應當保持活躍狀態,直到用戶使用 Cmd + Q 退出。 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) // 在這個文件中,你可以包含應用程序剩餘的所有部分的代碼, // 也可以拆分成幾個文件,然後用 require 導入。
3)preload.js
創建一個新的文件preload.js。
// preload.js // 所有Node.js API都可以在預加載過程中使用。 // 它擁有與Chrome擴展一樣的沙盒。 window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const dependency of ['chrome', 'node', 'electron']) { replaceText(`${dependency}-version`, process.versions[dependency]) } })
4)package.json
為瞭確保能夠運行相關electron的命令,需要修改package.json文件。
首先需要去設置main屬性,electron默認會去在開始時尋找項目根目錄下的index.js文件,此處我們使用的是main.js,所以需要去定義下。
// package.json { "name": "kuari", "version": "0.0.0", "main": "main.js", // 新增 "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" }, "dependencies": { "vue": "^3.2.16" }, "devDependencies": { "@vitejs/plugin-vue": "^1.9.3", "electron": "^15.1.2", "vite": "^2.6.4" } }
最後我們需要新增electron的運行命令。
// package.json { "name": "kuari", "version": "0.0.0", "main": "main.js", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview", "electron:serve": "electron ." // 新增 }, "dependencies": { "vue": "^3.2.16" }, "devDependencies": { "@vitejs/plugin-vue": "^1.9.3", "electron": "^15.1.2", "vite": "^2.6.4" } }
四. 運行
直接在終端輸入如下命令:
yarn electron:serve
接著我們就可以看到我們桌面應用就出來咯!
五. 最後
之前做項目一直用的Vue CLI Plugin Electron Builder,這次有個項目先用electron開發一下,推一波看看,後期看情況swift重新開發一個mac的桌面應用。也剛好嘗嘗鮮,一直沒有機會試試vite。
electron這個東東確實很方便,就是打包出來的應用體積太大,真的是硬傷啊。這次目標人群首先是windows用戶,所以上electron吧!
到此這篇關於Vite+Electron快速構建VUE3桌面應用的實現的文章就介紹到這瞭,更多相關Vite+Electron快速構建VUE3內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- electron原理,以及electron生成可執行文件的方法實例分析 原創
- vue + electron應用文件讀寫操作
- vue + Electron 制作桌面應用的示例代碼
- AntDesignPro使用electron構建桌面應用示例詳解
- 聊聊vue番茄鐘與electron 打包問題