electron + vue3 + electron-builder

### 使用 Electron 和 Vue3 构建项目的设置与配置 #### 项目初始化 为了创建一个基于 Electron 和 Vue3 的应用，首先需要安装必要的依赖项。通过 `electron-builder` 可以简化打包过程并支持跨平台发布。 ```bash npm init @vue/cli my-electron-app cd my-electron-app ``` 这会启动 Vue CLI 来引导新项目的建立[^1]。 #### 安装 Electron 和 electron-builder 接下来，在项目根目录下执行命令来添加 Electron 和构建工具： ```bash npm install --save-dev electron electron-builder ``` 此操作引入了开发环境所需的包以便于后续集成工作[^2]。 #### 修改 package.json 文件 编辑 `package.json` 添加脚本用于启动和打包应用程序: ```json { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron:build": "vue-cli-service build && electron-builder", "electron:start": "vue-cli-service build && electron ." }, ... } ``` 这些自定义指令允许开发者轻松地运行或编译整个解决方案。 #### 配置主进程文件 (main.js) 在 src 目录内新建 main.js 作为 Electron 应用程序入口点，并编写如下代码片段： ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: true } }) win.loadFile('dist/index.html') // 加载Vue前端页面 } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 这段 JavaScript 设置了一个基本窗口实例化逻辑以及事件监听器处理不同操作系统下的行为差异。 #### 创建预加载脚本(preload.js) 在同一级位置增加 preload.js 提供安全上下文之间的桥梁功能： ```javascript // All of the Node.js APIs are available in the preloader process. window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector); if (element) element.innerText = text; } for (api in window.electronAPI){ console.log(`${api} is available`); } }); ``` 该部分实现了 DOMContentLoaded 后的操作接口暴露给渲染进程中使用。 完成上述步骤之后就可以利用 npm run electron:start 开始调试模式下的本地测试；当准备部署时则采用 npm run electron:build 命令来进行最终版本制作。