背景

最近對electron比較感興趣，折騰一段時間后有了點眉目，記錄一下

how to start

第一步 創建一個vite-vue3項目

# 選vue3但是不要用ts，用js會舒服得多
npm create vite -n test-electron

第二步 裝各種依賴

# 命令1
npm i electron -d -s
# 命令2
npm install vite-plugin-optimizer --save-dev
# 命令3
npm install vite-plugin-node-polyfills --save-dev
# 命令4
npm install @electron/remote
# 命令5
npm install element-plus --save
# 命令6
npm i vue-router

注意，命令1可能需要反復執行反復失敗才會成功，推測是網的原因，而且我自己測試用yarn和pnpm必報錯，只有npm才行

第三步 配置

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import optimizer from 'vite-plugin-optimizer'// https://vite.dev/config/
export default defineConfig({plugins: [vue(), // 添加 Node.js 內置模塊的 polyfillnodePolyfills({include: ['path'],globals: { Buffer: true, global: true, process: true },protocolImports: true,}),optimizer({electron: `const { ipcRenderer } = require('electron'); export { ipcRenderer };`})],build: {rollupOptions: {output: {manualChunks: {// 將第三方庫分割到單獨的代碼塊'vendor': ['element-plus'],}}}},server: {port: 8888,cors: true, // 允許跨域hmr: true, // 開啟熱更新},"base": "./"
})

package.json

{"name": "ele-pro","private": true,"version": "0.0.0","type": "module","main": "electron/main.cjs","scripts": {"dev": "vite","build": "vite build","preview": "vite preview","electron:serve": "vite build && electron ."},"dependencies": {"@electron/remote": "^2.1.2","electron-reload": "^2.0.0-alpha.1","element-plus": "^2.9.7","vue": "^3.5.13","vue-router": "^4.5.0"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","electron": "^35.1.3","vite": "^6.2.0","vite-plugin-node-polyfills": "^0.23.0","vite-plugin-optimizer": "^1.4.3"}
}

一定要重點關注入口：“main”: “electron/main.cjs”,和electron啟動命令：“electron:serve”: “vite build && electron .”

electron入口

在項目的根目錄下新建文件夾/electron。
在文件夾中新建文件main.cjs
注意，一定要是.cjs，不是.js

// 控制應用生命周期和創建原生瀏覽器窗口的模組
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
require('@electron/remote/main').initialize()function createWindow() {// 創建瀏覽器窗口const mainWindow = new BrowserWindow({width: 1200,height: 800,frame: false, // 隱藏默認的標題欄webPreferences: {// 書寫渲染進程中的配置nodeIntegration: true, //開啟true這一步很重要,目的是為了vue文件中可以引入node和electron相關的APIcontextIsolation: false, // 可以使用require方法},})require('@electron/remote/main').enable(mainWindow.webContents)let env = 'pro'// 配置熱更新if (env == 'pro') {const elePath = path.join(__dirname, '../node_modules/electron')require('electron-reload')('../', {electron: require(elePath),})// 熱更新監聽窗口mainWindow.loadURL('http://localhost:8888')// 打開開發工具mainWindow.webContents.openDevTools()} else {// 生產環境中要加載文件，打包的版本// Menu.setApplicationMenu(null)// 加載 index.htmlmainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增}
}
// 這段程序將會在 Electron 結束初始化
// 和創建瀏覽器窗口的時候調用
// 部分 API 在 ready 事件觸發后才能使用。
app.whenReady().then(() => {// 關閉默認菜單欄Menu.setApplicationMenu(null)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()
})

啟動

打開兩個終端窗口，需要都在該項目的根目錄。
先運行npm run dev
再運行npm run electron:serve
這樣，electron就能根據vue的內容實時渲染

重寫關閉、隱藏、最大化最小化

在vue的根組件App.vue中：

<script setup>
import {Close,FullScreen,ArrowDown
} from '@element-plus/icons-vue'
import { getCurrentWindow } from '@electron/remote'
// 關閉
const closeApp = () => {const currentWindow = getCurrentWindow()currentWindow.close()
}
// 全屏/退出全屏應用
const fullScreenApp = () => {const currentWindow = getCurrentWindow()if (currentWindow.isFullScreen()) {currentWindow.setFullScreen(false)} else {currentWindow.setFullScreen(true)}
}// 最小化應用
const hideApp = () => {const currentWindow = getCurrentWindow()currentWindow.minimize()
}
</script><template><div><div style="padding: 10pt; text-align: right;"><el-button type="warning" size="small" circle :icon="ArrowDown" @click="hideApp"></el-button><el-button type="success" size="small" :icon="FullScreen" circle @click="fullScreenApp" /><el-button type="danger" size="small" :icon="Close" circle @click="closeApp" /></div><router-view></router-view></div>
</template><style scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;color: #2c3e50;
}
</style>

先到這里，后面有什么好玩的繼續更新