vue3 electron 以及打包

### 使用 Vue 3 和 Electron 开发及打包指南 #### 安装依赖工具 为了设置基于 Vue 3 和 Electron 的项目，首先需要安装必要的开发工具。对于全局安装 Electron 可以通过 `pnpm` 来完成： ```bash pnpm install electron -g ``` 这一步骤确保了可以在任何地方访问到最新版本的 Electron 构建环境[^1]。 #### 创建 Vue 应用程序 接着创建一个新的 Vue 项目作为前端部分的基础结构。推荐利用官方提供的 CLI 工具来快速初始化一个带有预设配置的新工程： ```bash vue create electron-hello ``` 此命令会引导用户选择一系列选项来自定义新项目的特性集，比如采用哪种 UI 框架或是测试库等。 #### 配置 Vite 支持 考虑到性能优化以及更高效的模块热替换机制，在现代 Web 应用中引入像 Vite 这样的下一代前端构建工具是非常有益处的。Vite 对于 Vue 3 提供了一流的支持，并且可以很好地集成进 Electron 生态系统里去[^2]: ```json { "scripts": { "serve": "vite", "build": "vite build" } } ``` 上述脚本片段展示了如何修改 `package.json` 文件中的 npm 脚本来启用 Vite 的服务端和生产模式下的编译流程。 #### 整合 Electron 主进程代码 当完成了以上准备工作之后，则需编写主进程中负责启动渲染窗口并加载远程或本地 HTML 页面的相关逻辑。通常情况下这部分会被放置在一个名为 `main.js` 或者类似的文件内： ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true } }) win.loadURL(process.env.VITE_DEV_SERVER_URL !== undefined ? process.env.VITE_DEV_SERVER_URL : url.format({ pathname: path.join(__dirname, '/dist/index.html'), protocol: 'file:', slashes: true })) } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ``` 这段 JavaScript 代码实现了基本的应用生命周期管理功能，包括但不限于打开开发者工具、监听关闭事件等等。 #### 实现打包部署 最后就是关于应用程序最终发布前的重要环节——打包。借助社区贡献的各种插件可以帮助简化这一过程，例如 `electron-builder` 就是一个非常流行的选择之一。按照文档说明调整好相应的配置项后即可轻松实现多平台可执行文件的一键生成。