vite electron 打包

### 使用 Vite 和 Electron 打包指南及最佳实践 #### 项目初始化 为了创建基于 Vite 的 Electron 应用程序，首先需要设置一个新的 Vite 项目。这可以通过 `npm` 或者 `yarn` 来完成。 ```bash npm create vite@latest my-electron-app --template vue cd my-electron-app ``` 安装必要的依赖项，包括 `electron` 和 `electron-builder`： ```bash npm install electron --save-dev npm install electron-builder --save-dev ``` #### 配置文件调整 对于 Electron 而言，在项目的根目录下添加或修改 `package.json` 文件中的脚本部分以便更好地支持构建过程[^1]。 ```json { "scripts": { "start": "vite", "build": "tsc && vite build", "serve": "vite preview", "electron:start": "electron ." }, "main": "src/main.js", // 主进程入口文件路径 ... } ``` 同时还需要定义主进程中使用的 JavaScript 文件 (`src/main.js`) 并确保它能够加载渲染页面的内容。 #### 创建主进程代码 在 `src/` 下新建名为 `main.ts` (如果使用 TypeScript) 或 `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(`file://${__dirname}/index.html`) } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` #### 渲染进程与预加载脚本 为了让前后端通信更加安全可靠，建议编写一个简单的预加载脚本来暴露特定 API 给前端调用。 ```javascript // src/preload.js window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { document.querySelector(selector).innerText = text; } for (const type of ['chrome', 'node', 'electron']) { replaceText(`#${type}`, process.versions[type]) } }); ``` #### 安全性和性能优化 考虑到安全性因素，应该启用上下文隔离并利用预加载脚本传递有限的功能给网页环境；另外通过配置 `.env.production` 设置合理的缓存策略可以提高启动速度[^2]。 #### 自动化部署流程 最后一步就是自动化整个打包发布的过程，可以在 `package.json` 中加入如下命令用于生产环境下的编译和分发工作。 ```json "scripts": { ..., "dist": "electron-builder" }, ... "build": { "productName": "${name}", "appId": "com.example.app", "directories": { "output": "release/" }, "files": [ "**/*", "!**/*.ts", "!src/**/*.test.*" ], "mac": { "target": ["dmg"] }, "win": { "target": ["nsis"] }, "linux": { "target": ["AppImage"] } } ```