快捷導(dǎo)航

Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼

更新時間：2023年07月23日 12:23:16 作者：阿虎兒

本文主要介紹了Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 現(xiàn)實問題

得益于 Vite 卓越的前端開發(fā)體驗，越來越多的 Electron 項目也開始應(yīng)用它來構(gòu)建開發(fā)。翻閱各種社區(qū)資源可以發(fā)現(xiàn)很多基于 Vite 搭建的 Electron 開發(fā)模板，但都存在著一些共同的問題：

配置相對復(fù)雜，繁瑣
需要輔助腳本來配合編譯開發(fā)
無法舉一反三，自主選擇前端框架（Vue、React 和 Svelte 等）
無法保護(hù)源代碼

electron-vite旨在解決這些問題，為 Electron 提供更快、更精簡的開發(fā)體驗。

這個腳手架雖然說的很厲害，但是還是有一些不足，比如對vue項目初始化時的配置不如官方的精細(xì)。還需要自己手動配置自己喜愛的開發(fā)方式。但是瑕不掩瑜，它依然是目前我認(rèn)為搭建electron配置最少的方式了。

2. 開始

# npm
npm create @quick-start/electron
# yarn
yarn create @quick-start/electron
# pnpm
pnpm create @quick-start/electron

? Project name: … <electron-app>
? Select a framework: ? vue
? Add TypeScript? … No / Yes
? Add Electron updater plugin? … No / Yes
? Enable Electron download mirror proxy? … No / Yes
Scaffolding project in ./<electron-app>...
Done.

接下來 npm install安裝就可以了

3. 開發(fā)調(diào)試

script腳本中有兩個比較像npm run start和npm run dev

start先打包成靜態(tài)文件，再啟動electron加載本地文件，預(yù)打包前的預(yù)覽
dev先啟動本地服務(wù)器，再啟動electron加載服務(wù)頁面，開發(fā)時使用

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "An Electron application with Vue",
  "main": "./out/main/index.js",
  "author": "example.com",
  "homepage": "https://www.electronjs.org",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win --config",
    "build:mac": "npm run build && electron-builder --mac --config",
    "build:linux": "npm run build && electron-builder --linux --config"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^2.0.0",
    "@electron-toolkit/utils": "^1.0.2",
    "electron-updater": "^5.3.0"
  },
  "devDependencies": {
    "@electron/notarize": "^1.2.3",
    "@rushstack/eslint-patch": "^1.3.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^7.1.0",
    "electron": "^24.4.1",
    "electron-builder": "^23.6.0",
    "electron-vite": "^1.0.23",
    "eslint": "^8.42.0",
    "eslint-plugin-vue": "^9.14.1",
    "less": "^4.1.3",
    "prettier": "^2.8.8",
    "vite": "^4.3.9",
    "vue": "^3.3.4"
  }
}

執(zhí)行npm run dev 會看到

4. 打包exe

執(zhí)行npm run build:win就會開始打包，打包前會從github下載必要的3個資源文件，這三個文件雖然不大，但是大概率要下載失敗，所以手動點擊報錯信息上的網(wǎng)址手動下載下來。

winCodeSign-2.6.0.7z
nsis-3.0.4.1.7z
nsis-resources-3.4.1.7z

下載下來以后，將他們拷貝到C:\Users\[your name]\AppData\Local\electron-builder\Cache目錄下，新建兩個文件夾winCodeSign和nsis，將壓縮包解壓到對應(yīng)的目錄，結(jié)構(gòu)如下

winCodeSign\winCodeSing-2.6.0
nsis\nsis-3.0.4.1
nsis\nsis-resources-3.4.0

然后再執(zhí)行npm run build:win

 *  正在執(zhí)行任務(wù): npm run build:win 
> electron-app@1.0.0 build:win
> npm run build && electron-builder --win --config
> electron-app@1.0.0 build
> electron-vite build
vite v4.3.9 building for production...
? 2 modules transformed.
out/main/index.js  1.43 kB
? built in 147ms
vite v4.3.9 building for production...
? 1 modules transformed.
out/preload/index.js  0.42 kB
? built in 18ms
vite v4.3.9 building for production...
? 11 modules transformed.
../../out/renderer/index.html                   0.52 kB
../../out/renderer/assets/icons-e5112e1e.svg    9.06 kB
../../out/renderer/assets/index-4b0e6ae1.css    2.74 kB
../../out/renderer/assets/index-1a29896b.js   150.63 kB
? built in 1.25s
  ? electron-builder  version=23.6.0 os=10.0.22621
  ? loaded configuration  file=D:\leehoo2\electron-app\electron-builder.yml
  ? writing effective config  file=dist\builder-effective-config.yaml
  ? skipped dependencies rebuild  reason=npmRebuild is set to false
  ? packaging       platform=win32 arch=x64 electron=24.5.1 appOutDir=dist\win-unpacked
  ? building        target=nsis file=dist\electron-app-1.0.0-setup.exe archs=x64 oneClick=true perMachine=false
  ? building block map  blockMapFile=dist\electron-app-1.0.0-setup.exe.blockmap
 *  終端將被任務(wù)重用，按任意鍵關(guān)閉。

打包后的exe文件就在項目的dist目錄，雙擊后直接安裝了，也沒有提示安裝目錄等提示。

具體個性化的需求還需要自行查看官網(wǎng)進(jìn)行調(diào)整。

到此這篇關(guān)于Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼的文章就介紹到這了,更多相關(guān)Electron+Vue3+Vite搭建桌面應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: