文章目錄

• • 一、創(chuàng)建Electron應(yīng)用程序
  • • 1. 初始化vite項(xiàng)目
    • 2. 安裝electron
    • 3. 修改配置文件
    • 4. 編寫electron文件
    • 5. `npm run dev` 運(yùn)行
  • 二、打包
  • • 1. 安裝包
    • 2. 配置打包腳本
    • 3. 渲染進(jìn)程和主進(jìn)程的通信
    • • 渲染進(jìn)程
      • 主進(jìn)程

一、創(chuàng)建Electron應(yīng)用程序

Electron官網(wǎng)

1. 初始化vite項(xiàng)目

npm create vite@latestcd 項(xiàng)目文件 npm install

2. 安裝electron

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

electron 安裝失敗：

# 查看詳細(xì)安裝日志 npm install electron -D --timing=true --loglevel=verbose# 切換成cnpm安裝 ## 安裝cnpm npm install -g cnpm --registry=http://registry.npmmirror.com ## cnpm安裝 cnpm install electron -D

3. 修改配置文件

vite.config.ts

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({entry: 'electron/index.ts'})], })

package.json

將 ”type“: "module" 替換為 "main": "dist-electron/index.js"

4. 編寫electron文件

import path from "path"; const { app, BrowserWindow } = require('electron');const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {contextIsolation: false, // 是否開啟隔離上下文nodeIntegration: true, // 渲染進(jìn)程使用Node API// preload: path.join(__dirname, "../electron-preload/index.js"), // 需要引用js文件}});// 如果打包了，渲染index.htmlif (app.isPackaged) {win.loadFile(path.join(__dirname, "../index.html"));} else {win.loadURL(process.env['VITE_DEV_SERVER_URL'])} };app.whenReady().then(() => {createWindow(); // 創(chuàng)建窗口app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}}); });// 關(guān)閉窗口 app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();} });

5. npm run dev 運(yùn)行

詳細(xì)請看：Electron + Vite + TS + Vue3打開新窗口實(shí)戰(zhàn)

二、打包

1. 安裝包

# 利用electron-builder來進(jìn)行打包 npm install electron-builder -D# 調(diào)試工具 npm install electron-devtools-installer -D# 輔助工具，快速刪除某些文件或文件夾 npm install rimraf -D

electron-devtools-installer github地址

2. 配置打包腳本

修改package.json

修改打包命令： "build": "rimraf dist && vue-tsc && vite build && electron-builder",

添加 build 配置

{......"build": {"appId": "com.electron.desktop","productName": "myElectron","asar": true,"copyright": "Copyright ? 2022 myElectron","directories": {"output": "release/${version}"},"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": "版本更新的具體內(nèi)容"}} }

3. 渲染進(jìn)程和主進(jìn)程的通信

# 安裝渲染插件 npm install vite-plugin-electron-renderer -D

配置 vite.config.ts

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({entry: "electron/index.ts"}), electronRender()],build: {emptyOutDir: false,} })

類似發(fā)布訂閱模式

渲染進(jìn)程

渲染進(jìn)程通過 ipcRenderer.on() 和 ipcRenderer.send() 接收/傳遞信息主進(jìn)程

<script setup lang="ts"> import { ipcRenderer } from 'electron'// 渲染進(jìn)程接收主進(jìn)程傳遞信息 ipcRenderer.on('load', (_, msg) => {console.log('主進(jìn)程傳遞信息 :>> ', msg) })// 渲染進(jìn)程傳遞主進(jìn)程信息 const send = () => {ipcRenderer.send('msg', 1111) } </script><template><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><button @click="send">發(fā)送</button> </template>

主進(jìn)程

主進(jìn)程通過 ipcMain.on() 接收渲染進(jìn)程傳遞數(shù)據(jù)，通過 win.webContent.send() 傳遞數(shù)據(jù)至渲染進(jìn)程

const { app, BrowserWindow, ipcMain } = require('electron');const createWindow = () => {...// 打開調(diào)試工具win.webContents.openDevTools()// 主進(jìn)程接收渲染進(jìn)程傳遞信息ipcMain.on('msg', (_, num) => {console.log('渲染進(jìn)程傳遞信息 :>> ', num);})setTimeout(() => {// 主進(jìn)程傳遞渲染進(jìn)程win.webContents.send('load', { msg: '初始化完成' })}, 2000) };

總結(jié)

以上是生活随笔為你收集整理的Electron + vite + vue3简单实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。