Vite+Electron快速構建VUE3桌面應用的實現
目錄
- 一. 簡介
- 二. 建立一個Vite專案
- 1. 安裝 vite
- 2. 建立專案
- 3. 進入且執行
- 三. 配置Electron
- 1. 官方文件
- 2. 安裝
- 3. 配置檔案
- 四. 執行
- 五. 最後
一. 簡介
首先，介紹下vite和Electron。
- Vite是一種新型前端構建工具，能夠顯著提升前端開發體驗。由尤大推出，其發動態表示“再也回不去webpack了...”
- Electron是一個使用 、HTML 和 構建桌面應用程式的框架。 嵌入Chromium和Node.到二進位制的 Electron 允許您保持一個 Script 程式碼程式碼庫並建立 在Windows上執行的跨平臺應用 macOS和——不需要本地開發 經驗。
當開始想用去開發一個桌面應用時，首先去搜索下，瞭解到當前如下兩種現成方案：
- 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": {
"www.cppcns.comvue": "^3.2.16"
},"devDependencies": {
"@vitejs/www.cppcns.complugin-vue": "^1.9.3","electron": "^15.1.2","vite": "^2.6.4"
}
}
最後我們需要新增electron的執行命令。
// package.json
{
"name": "kuari","scripts": {
"dev": "vite","serve": "vite preview","electron:serve": "electron ." // 新增
},"dependencies": {
"vue": "^3.2.16"
},"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3","vite": "^2.6.4"
}
}
四. 執行
直接在終端輸入如下命令：
yarn electron:serve
接著我們就可以看到我們桌面應用就出來咯！
五. 最後
之前做專案一直用的Vue CLI Plugin Electron http://www.cppcns.comBuilder，這次有個專案先用electron開發一下，推一波看看，後期看情況swift重新開發一個mac的桌面應用。也剛好嚐嚐鮮，一直沒有機會試試vite。
electron這個東東確實很方便，就是打包出來的應用體積太大，真的是硬傷啊。這次目標人群首先是windows使用者，所以上electron吧！
到此這篇關於Vite+Electron快速構建VUE3桌面應用的實現的文章就介紹到這了,更多相關Vite+Electron快速構建VUE3內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！