electron++vite+vue+ts项目完整环境搭建，包括开发环境和打包环境

<think>由于这是一个较为复杂的项目搭建过程，我将分步骤详细说明如何搭建一个使用Electron、Vite、Vue 3和TypeScript的项目。整个过程包括初始化项目、配置开发环境、集成Electron以及配置打包环境。 ### 步骤1: 初始化Vite + Vue 3 + TypeScript项目 使用Vite脚手架创建一个新的Vue项目，选择vue-ts模板。 ```bash npm create vite@latest my-electron-vue-app -- --template vue-ts cd my-electron-vue-app npm install ``` ### 步骤2: 安装Electron和相关依赖 在项目目录中安装Electron和vite-plugin-electron，用于集成Electron。 ```bash npm install electron --save-dev npm install vite-plugin-electron --save-dev ``` ### 步骤3: 配置Vite以支持Electron 修改`vite.config.ts`文件，配置vite-plugin-electron插件。 ```typescript // vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' export default defineConfig({ plugins: [ vue(), electron({ entry: 'electron/main.ts', // 主进程入口文件 }), ], }) ``` ### 步骤4: 创建Electron主进程文件 在项目根目录下创建`electron`文件夹，然后在其中创建`main.ts`文件。 ```typescript // electron/main.ts import { app, BrowserWindow } from 'electron' import path from 'path' function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), }, }) // 如果是开发环境，则加载开发服务器地址，否则加载打包后的index.html if (process.env.NODE_ENV === 'development') { win.loadURL('http://localhost:5173') } else { win.loadFile(path.join(__dirname, '../dist/index.html')) } } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 同时，创建一个简单的`preload.js`文件（在electron目录下）： ```javascript // electron/preload.js console.log('Preload script loaded') ``` ### 步骤5: 修改package.json 添加或修改以下脚本： ```json { "name": "my-electron-vue-app", "private": true, "version": "0.0.0", "main": "electron/main.js", // 指定Electron入口 "scripts": { "dev": "vite", "build": "vite build && electron-builder", // 需要安装electron-builder "preview": "vite preview", "electron:dev": "electron ." // 用于开发环境启动Electron }, // ... 其他依赖和配置 } ``` 注意：我们将在下一步安装electron-builder。 ### 步骤6: 安装electron-builder并配置打包 安装electron-builder： ```bash npm install electron-builder --save-dev ``` 在项目根目录下创建`electron-builder.json`文件，配置打包选项： ```json { "appId": "com.example.my-electron-vue-app", "productName": "My Electron Vue App", "directories": { "output": "dist-electron" }, "files": [ "dist/**/*", "electron/**/*" ], "mac": { "category": "public.app-category.developer-tools", "target": "dmg" }, "win": { "target": "nsis" }, "linux": { "target": "AppImage" } } ``` ### 步骤7: 开发环境运行 现在，我们可以同时启动Vite开发服务器和Electron应用。为了方便，我们可以使用`concurrently`来同时运行两个命令。 安装concurrently： ```bash npm install concurrently --save-dev ``` 修改package.json的scripts部分： ```json "scripts": { "dev": "concurrently \"vite\" \"wait-on http://localhost:5173 && electron .\"", "build": "vite build && electron-builder", "preview": "vite preview" } ``` 这样，运行`npm run dev`时，会先启动Vite开发服务器，然后等待服务器就绪后启动Electron。 ### 步骤8: 打包应用 运行以下命令进行打包： ```bash npm run build ``` 打包后的应用将输出到`dist-electron`目录。 ### 解释 1. **Vite**：用于构建Vue前端，提供快速的开发服务器和打包功能。 2. **vite-plugin-electron**：这个插件使得在Vite项目中集成Electron变得简单，它自动处理主进程和渲染进程的构建。 3. **Electron**：用于构建桌面应用程序。 4. **electron-builder**：用于将Electron应用打包成可执行文件。 在开发环境中，我们使用Vite的开发服务器，Electron加载这个服务器的地址。在生产环境中，我们首先构建Vue项目（生成dist目录），然后使用electron-builder将整个应用打包。 ### 注意事项 - 在开发环境中，由于Electron加载的是Vite开发服务器的地址，所以需要确保Vite服务器先启动，然后启动Electron。我们使用`wait-on`来等待服务器就绪（通过`concurrently`和`wait-on`配合）。 - 主进程文件（main.ts）和预加载脚本（preload.js）需要放在electron目录下，也可以根据喜好调整，但需要相应修改配置。 - 在渲染进程中，如果需要使用Node.js API，可以通过预加载脚本暴露给渲染进程。 ### 完整代码结构 ``` my-electron-vue-app/ ├── electron/ │ ├── main.ts │ └── preload.js ├── src/ │ ├── main.ts │ ├── App.vue │ └── ... ├── index.html ├── package.json ├── vite.config.ts ├── tsconfig.json └── electron-builder.json ``` ### §§相关问题§§: 1. 如何在Electron中使用Node.js模块？ 2. 如何通过预加载脚本在渲染进程中安全地暴露Node.js功能？ 3. 如何为Electron应用添加原生模块支持？ 4. 如何配置electron-builder进行多平台打包？</think>### Electron + Vite + Vue 3 + TypeScript 项目完整环境搭建 #### 1. 初始化项目 ```bash # 创建Vite项目 npm create vite@latest electron-vue-app -- --template vue-ts cd electron-vue-app # 安装Electron依赖 npm install electron electron-builder concurrently wait-on cross-env -D ``` #### 2. 项目结构调整 ``` electron-vue-app/ ├── electron/ │ ├── main.ts # Electron主进程 │ └── preload.ts # 预加载脚本 ├── src/ # Vue渲染进程 ├── index.html ├── package.json └── vite.config.ts ``` #### 3. 配置Vite (vite.config.ts) ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], base: './', // 相对路径 build: { outDir: 'dist', // 构建输出目录 }, resolve: { alias: { '@': resolve(__dirname, 'src') } } }) ``` #### 4. Electron主进程 (electron/main.ts) ```typescript import { app, BrowserWindow, ipcMain } from 'electron' import path from 'path' const createWindow = () => { const win = new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: false, contextIsolation: true } }) // 开发环境加载Vite服务器 if (process.env.NODE_ENV === 'development') { win.loadURL('http://localhost:5173') win.webContents.openDevTools() } else { win.loadFile(path.join(__dirname, '../dist/index.html')) } } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() }) // 示例IPC通信 ipcMain.handle('get-app-path', () => app.getAppPath()) ``` #### 5. 预加载脚本 (electron/preload.ts) ```typescript import { contextBridge, ipcRenderer } from 'electron' contextBridge.exposeInMainWorld('electronAPI', { getAppPath: () => ipcRenderer.invoke('get-app-path') }) ``` #### 6. 修改package.json ```json { "name": "electron-vue-app", "private": true, "version": "0.0.1", "main": "electron/main.js", "scripts": { "dev": "concurrently -k \"vite\" \"wait-on http://localhost:5173 && electron .\"", "build": "vite build && electron-builder", "preview": "vite preview" }, "build": { "appId": "com.example.electronvue", "productName": "ElectronVueApp", "directories": { "output": "release" }, "files": [ "dist/**/*", "electron/**/*" ], "mac": { "category": "public.app-category.developer-tools" }, "win": { "target": "nsis" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true } } } ``` #### 7. TypeScript配置 (tsconfig.json) ```json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "lib": ["ESNext", "DOM"], "types": ["vite/client", "electron"], "paths": { "@/*": ["./src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "electron/**/*.ts"] } ``` #### 8. Vue组件中使用Electron API (src/App.vue) ```vue <script setup lang="ts"> import { ref, onMounted } from 'vue' const appPath = ref('') onMounted(async () => { if (window.electronAPI) { appPath.value = await window.electronAPI.getAppPath() } }) </script> <template> <div> <h1>Electron + Vite + Vue 3</h1> <p>应用路径: {{ appPath }}</p> </div> </template> ``` ### 开发环境使用 ```bash # 启动开发环境 npm run dev # 会同时启动： # 1. Vite开发服务器 (localhost:5173) # 2. Electron窗口加载Vite服务 ``` ### 生产环境打包 ```bash # 构建应用 npm run build # 输出目录: # - release/ (打包后的安装程序) # - dist/ (渲染进程构建结果) # - electron/main.js (编译后的主进程) ``` ### 关键配置说明 1. **上下文隔离**：通过预加载脚本安全暴露API 2. **开发环境热更新**：Vite + Electron实时联动 3. **安全配置**： - `nodeIntegration: false` - `contextIsolation: true` 4. **打包优化**： - 自动分离依赖 - 按平台生成安装包 5. **TypeScript支持**： - 主进程和渲染进程共享TS配置 - Electron类型定义支持 ### 常见问题解决 1. **白屏问题**： - 确保`base: './'`配置正确 - 检查文件路径大小写（Linux环境敏感） 2. **API未定义**： - 检查预加载脚本是否正确注入 - 确保`contextIsolation`启用时使用`contextBridge` 3. **打包体积过大**： ```json "build": { "asar": true, "compression": "maximum" } ``` ###