electron vite vue3

### 如何将 Electron 与 Vite 和 Vue3 集成 集成 Electron、Vite 和 Vue3 是一个常见的开发需求，用于构建桌面应用程序。以下是详细的实现方法和相关配置。 #### 1. 创建项目 使用 `npm create vite` 命令创建一个基于 Vue3 的 Vite 项目： ```bash npm create vite@latest my-electron-vite-project --template vue ``` 进入项目目录并安装依赖： ```bash cd my-electron-vite-project npm install ``` #### 2. 安装 Electron 相关依赖 为了支持 Electron，需要安装以下依赖： - `electron`：Electron 核心库。 - `electron-builder`：用于打包和分发 Electron 应用程序。 - `vite-plugin-electron`：Vite 插件，支持 Electron 主进程和渲染进程的开发模式。 执行以下命令安装这些依赖： ```bash npm install electron electron-builder vite-plugin-electron --save-dev ``` #### 3. 配置 Vite 在 `vite.config.ts` 文件中，添加对 Electron 的支持。以下是一个示例配置[^4]： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ ElementPlusResolver(), // 自动注册图标组件 IconsResolver({ enabledCollections: ['ep'] }), ], dts: './types/components.d.ts', // 自动生成类型声明文件 }), ], server: { port: 3000, // 设置开发服务器端口 }, }) ``` #### 4. 配置 Electron 主进程 在项目根目录下创建一个 `electron` 文件夹，并添加主进程文件 `main.ts` 或 `main.js`。以下是一个简单的主进程代码示例[^3]： ```typescript import { app, BrowserWindow } from 'electron' let mainWindow: BrowserWindow | null = null app.whenReady().then(() => { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), // 预加载脚本 nodeIntegration: false, contextIsolation: true, }, }) mainWindow.loadURL('http://localhost:3000') // 加载 Vite 开发服务器 }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() }) ``` #### 5. 配置打包工具 创建或修改 `electron-builder.json5` 文件以定义打包配置。以下是一个基本的打包配置[^3]： ```json5 { "productName": "MyElectronApp", "appId": "com.example.myelectronapp", "directories": { "output": "dist" }, "files": [ "dist/**/*", "node_modules/**/*", "package.json" ], "win": { "target": "nsis" }, "mac": { "target": "dmg" } } ``` #### 6. 启动开发环境 在 `package.json` 中添加启动脚本： ```json "scripts": { "dev": "vite", "start": "electron ." } ``` 运行以下命令启动开发环境： ```bash npm run dev npm start ``` #### 7. 打包应用 执行以下命令进行打包： ```bash npm run build npx electron-builder ``` --- ###