建議視頻教程小滿Vue3（第三十九章 electron桌面程序）_嗶哩嗶哩_bilibili

Electron官網Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.

我們用的VsCode 也是 electron 開發的

?electron 內置了 Chromium 和 nodeJS 其中?Chromium 是渲染進程 主要渲染和解析HTML，Nodejs作為主進程，其中管道用IPC 通信

1.使用vite 構建 electron項目

創建一個vite 項目

npm init vite@latest

安裝electron

npm install electron -D npm install vite-plugin-electron -D

?根目錄新建 electron / index.ts

修改vite.config.ts 配置文件

引入electron插件配置main? entry對應electron的文件

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' // https://vitejs.dev/config/ export default defineConfig({plugins: [vue(), electron({main: {entry: "electron/index.ts"}})] })

編寫代碼 electron / index.ts

import { app, BrowserWindow } from 'electron' import path from 'path' //app 控制應用程序的事件生命周期。 //BrowserWindow 創建并控制瀏覽器窗口。let win: BrowserWindow | null; //定義全局變量獲取 窗口實例const createWindow = () => {win = new BrowserWindow({//webPreferences: {devTools: true,contextIsolation: false,nodeIntegration: true//允許html頁面上的javascipt代碼訪問nodejs 環境api代碼的能力（與node集成的意思）}})if (app.isPackaged) {win.loadFile(path.join(__dirname, "../index.html"));} else { //VITE_DEV_SERVER_HOST 如果是undefined 換成 VITE_DEV_SERVER_HOSTNAMEwin.loadURL(`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`)} } //isPackage 不好使換下面的// if(process.env.NODE_ENV != 'development'){// win.loadFile(path.join(__dirname, "../index.html"));// }else{//win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOSTNAME']}:${process.env['VITE_DEV_SE//RVER_PORT']}`)// } //在Electron完成初始化時被觸發 app.whenReady().then(createWindow)

配置package json 增加main 字段 type 去掉

{"name": "electron-vite","private": true,"version": "0.0.0","main": "dist/electron/index.js","scripts": {"dev": "vite","build": "vue-tsc --noEmit && vite build && electron-builder","preview": "vite preview"},"dependencies": {"vue": "^3.2.37"},"devDependencies": {"@vitejs/plugin-vue": "^3.0.0","electron": "^19.0.10","electron-builder": "^23.1.0","typescript": "^4.6.4","vite": "^3.0.0","vite-plugin-electron": "^0.8.3","vue-tsc": "^0.38.4"} }

npm run dev

2.打包Electron

需要安裝electron-builder

npm install electron-builder -D

package json 配置 build 修改npm run build命令

"build": "vue-tsc --noEmit && vite build && electron-builder", "build": {"appId": "com.electron.desktop","productName": "electron","asar": true,"copyright": "Copyright ? 2022 electron","directories": {"output": "release/"},"files": ["dist"],"mac": {"artifactName": "${productName}_${version}.${ext}","target": ["dmg"]},"win": {"target": [{"target": "nsis","arch": ["x64"]}],"artifactName": "${productName}_${version}.${ext}"},"nsis": {"oneClick": false,"perMachine": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": false},"publish": [{"provider": "generic","url": "http://127.0.0.1:8080"}],"releaseInfo": {"releaseNotes": "版本更新的具體內容"}}

nsis 配置詳解?

{"oneClick": false, // 創建一鍵安裝程序還是輔助安裝程序（默認是一鍵安裝）"allowElevation": true, // 是否允許請求提升，如果為false，則用戶必須使用提升的權限重新啟動安裝程序 （僅作用于輔助安裝程序）"allowToChangeInstallationDirectory": true, // 是否允許修改安裝目錄 （僅作用于輔助安裝程序）"installerIcon": "public/timg.ico",// 安裝程序圖標的路徑"uninstallerIcon": "public/timg.ico",// 卸載程序圖標的路徑"installerHeader": "public/timg.ico", // 安裝時頭部圖片路徑（僅作用于輔助安裝程序）"installerHeaderIcon": "public/timg.ico", // 安裝時標題圖標（進度條上方）的路徑（僅作用于一鍵安裝程序）"installerSidebar": "public/installerSiddebar.bmp", // 安裝完畢界面圖片的路徑，圖片后綴.bmp，尺寸164*314 （僅作用于輔助安裝程序）"uninstallerSidebar": "public/uninstallerSiddebar.bmp", // 開始卸載界面圖片的路徑，圖片后綴.bmp，尺寸164*314 （僅作用于輔助安裝程序）"uninstallDisplayName": "${productName}${version}", // 控制面板中的卸載程序顯示名稱"createDesktopShortcut": true, // 是否創建桌面快捷方式"createStartMenuShortcut": true,// 是否創建開始菜單快捷方式"shortcutName": "SHom", // 用于快捷方式的名稱，默認為應用程序名稱"include": "script/installer.nsi", // NSIS包含定制安裝程序腳本的路徑，安裝過程中自行調用 (可用于寫入注冊表 開機自啟動等操作)"script": "script/installer.nsi", // 用于自定義安裝程序的NSIS腳本的路徑"deleteAppDataOnUninstall": false, // 是否在卸載時刪除應用程序數據（僅作用于一鍵安裝程序）"runAfterFinish": true, // 完成后是否運行已安裝的應用程序（對于輔助安裝程序，應刪除相應的復選框）"menuCategory": false, // 是否為開始菜單快捷方式和程序文件目錄創建子菜單，如果為true，則使用公司名稱 }

npm run build

?

?

?3.Electron Vscode 輸出亂碼解決 方案

dev 的時候 加上chcp 65001 輸出中文

"dev": "chcp 65001 && vite",

加上之后

?4.渲染進程和主進程通信

vite.config.ts 需要修改 不然會報一個錯Error: Module "path" has been externalized for browser compatibility. Cannot

只要安裝了??vite-plugin-electron 就會帶上?vite-plugin-electron-renderer 直接引入用就行

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' import electronRender from 'vite-plugin-electron-renderer' // https://vitejs.dev/config/ export default defineConfig({plugins: [vue(), electron({main: {entry: "electron/index.ts"}}),electronRender()],build:{emptyOutDir: false,} })

渲染進程使用ipcRenderer 發送

import { ipcRenderer } from 'electron'const open = () => {ipcRenderer.send('openFlyCar') }

主進程使用 ipcMain 接受

ipcMain.on('openFlyCar',()=>{console.log('收到') })

---

主進程通知渲染進程

const win = new BrowserWindow(xxxxx) win!.webContents.send('load', { message: "electron初始化了" })

渲染進程接受

ipcRenderer.on('load',(_,data)=>{console.log(data) })

5.更多配置查看該插件

vite-plugin-electron: Vite plugin for electron-builder

總結

以上是生活随笔為你收集整理的小满Vue3第三十九章（Vue开发桌面程序Electron）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。