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

<think>我们使用Vite来初始化一个Vue + TypeScript项目，然后集成Electron，最后配置打包环境。 步骤： 1. 使用Vite创建Vue+TS项目 2. 安装Electron和相关依赖 3. 配置Electron的入口文件 4. 修改package.json脚本，支持开发环境和打包 5. 配置打包工具（这里我们使用electron-builder） 详细步骤： 第一步：创建Vite项目 运行命令：`npm create vite@latest my-electron-vue-app -- --template vue-ts` 进入项目目录：`cd my-electron-vue-app` 第二步：安装Electron和electron-builder（作为开发依赖） 运行：`npm install electron --save-dev` 运行：`npm install electron-builder --save-dev` 第三步：创建Electron的入口文件 在项目根目录下创建`electron`文件夹，并在其中创建`main.ts`（或`main.js`）作为Electron的主进程文件。 示例`main.ts`内容： ```typescript import { app, BrowserWindow } from 'electron'; import path from 'path'; // 处理路径问题 const isDevelopment = process.env.NODE_ENV !== 'production'; function createWindow() { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, // 注意：在真实项目中，为了安全，你应该考虑启用上下文隔离 }, }); // 加载应用 if (isDevelopment) { // 开发模式：加载Vite开发服务器提供的URL win.loadURL('http://localhost:5173'); win.webContents.openDevTools(); } else { // 生产模式：加载打包后的index.html win.loadFile(path.join(__dirname, '../dist/index.html')); } } // 当Electron完成初始化时，创建窗口 app.whenReady().then(createWindow); // 当所有窗口关闭时退出应用（MacOS除外） app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // 在MacOS上，当点击dock图标且没有其他窗口打开时，重新创建窗口 if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` 第四步：修改package.json脚本 在`package.json`中，我们需要添加和修改一些脚本： 1. 修改`main`字段为`electron/main.js`（注意：我们使用TypeScript，但Electron运行的是编译后的JS，所以我们需要将main.ts编译到dist-electron目录） 2. 添加脚本： - `dev:electron`: 用于开发环境，先启动Vite开发服务器，然后启动Electron - `build:electron`: 构建Vue应用和Electron主进程 - `postinstall`: 安装后自动构建Electron（可选） - `pack`: 使用electron-builder打包 为了在开发时同时启动Vite和Electron，我们可以使用`concurrently`和`wait-on`来并行运行命令。 安装：`npm install concurrently wait-on cross-env --save-dev` 修改后的脚本示例： ```json { "name": "my-electron-vue-app", "version": "0.0.0", "main": "dist-electron/main.js", "scripts": { "dev": "npm run dev:electron", "dev:vite": "vite", "dev:electron": "concurrently -k \"npm run dev:vite\" \"npm run start:electron\"", "start:electron": "wait-on http://localhost:5173 && cross-env NODE_ENV=development electron .", "build": "npm run build:vite && npm run build:electron", "build:vite": "vite build", "build:electron": "tsc -p electron.tsconfig.json", "pack": "npm run build && electron-builder" }, // ...其他字段 } ``` 注意：我们需要为Electron的主进程TypeScript文件单独配置一个tsconfig.json（例如`electron.tsconfig.json`），内容如下： ```json { "compilerOptions": { "target": "ESNext", "module": "CommonJS", "outDir": "dist-electron", "esModuleInterop": true, "strict": true, "sourceMap": true }, "include": ["electron/**/*"] } ``` 第五步：配置electron-builder 在项目根目录创建`electron-builder.json`，配置打包选项，例如： ```json { "appId": "com.example.my-electron-vue-app", "productName": "My Electron Vue App", "directories": { "output": "release" }, "files": [ "dist/**/*", "dist-electron/**/*" ], "mac": { "category": "public.app-category.utilities" }, "win": { "target": "nsis" }, "linux": { "category": "Utility" } } ``` 最后，确保安装TypeScript（如果创建项目时没有安装，则运行`npm install typescript --save-dev`），并配置好根目录的`tsconfig.json`（Vite项目已经生成，我们只需要添加Electron的配置即可）。 由于我们使用两个tsconfig（一个给Vue，一个给Electron），所以根目录的tsconfig可以保持不变，专门用于渲染进程。 现在，我们可以运行`npm run dev`来启动开发环境，运行`npm run pack`来打包应用。 注意：在开发过程中，Electron主进程的代码修改后需要重启Electron。我们可以使用`nodemon`来监听主进程文件的变化并重启，但这里为了简化，我们暂时不配置。 以上就是一个完整的Electron+Vite+Vue+TypeScript项目的搭建过程。 由于代码较长，这里只给出关键部分代码示例。请按照步骤操作。 下面给出完整的示例代码结构： 项目结构： ``` my-electron-vue-app/ ├── electron/ │ └── main.ts ├── electron.tsconfig.json ├── electron-builder.json ├── package.json ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts ├── index.html └── src/ └── ... (Vue项目文件) ``` 注意：在开发时，我们通过`wait-on`等待Vite开发服务器启动（http://localhost:5173）后再启动Electron，这样Electron就能加载Vite提供的页面。 在打包时，我们先构建Vue项目（生成dist目录），然后构建Electron主进程（生成dist-electron目录），最后electron-builder会将这两个目录一起打包。 现在，我们给出完整的代码示例： 1. electron/main.ts（如上） 2. electron.tsconfig.json（如上） 3. electron-builder.json（如上） 4. package.json中的scripts（如上） 由于篇幅限制，无法将每个文件都完整写出，但关键部分已经给出。 最后，我们还需要注意一点：在Vue项目中，我们可能需要根据环境调整静态资源的路径。在生产环境中，Electron加载的是文件（file://），所以需要确保资源路径正确。Vite默认会将资源路径设置为绝对路径，这可能会导致问题。我们可以通过设置`base: './'`来解决。 在`vite.config.ts`中，我们需要根据环境设置base： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; // https://vitejs.dev/config/ export default defineConfig({ base: './', // 这样打包后的资源路径就是相对路径 plugins: [vue()], }); ``` 这样，在生产环境中，Electron加载index.html时，引用的资源路径就是相对于当前目录的，可以正常加载。 至此，项目搭建完成。 注意：以上步骤是在Windows/Linux/MacOS通用步骤，但在不同平台上打包可能需要额外的配置。 现在，你可以运行`npm run dev`启动开发环境，运行`npm run pack`进行打包。 如果遇到问题，请检查路径和依赖是否正确。 §§相关问题§§: 1. 如何在Electron中实现主进程和渲染进程的通信？ 2. 如何配置electron-builder打包成不同平台的应用（如Windows、Mac、Linux）？ 3. 在Electron+Vue项目中，如何安全地使用Node.js功能（比如文件系统）？ 4. 如何为Electron应用添加自动更新功能？</think>下面我将详细介绍如何搭建一个完整的 Electron + Vite + Vue + TypeScript 项目，包括开发环境和打包环境配置。 ### 完整项目搭建步骤 #### 1. 创建基础项目结构 ```bash # 创建项目目录 mkdir electron-vite-vue-ts cd electron-vite-vue-ts # 初始化项目 npm init -y # 安装 Vite + Vue + TS 依赖 npm install vite @vitejs/plugin-vue vue typescript @vue/tsconfig -D # 安装 Electron 依赖 npm install electron electron-builder concurrently wait-on cross-env -D ``` #### 2. 项目结构 ``` electron-vite-vue-ts/ ├── electron/ │ ├── main.ts # Electron 主进程入口 │ └── preload.ts # 预加载脚本 ├── src/ │ ├── main.ts # Vue 应用入口 │ ├── App.vue # 根组件 │ ├── components/ # Vue 组件 │ └── assets/ # 静态资源 ├── index.html # Vite 入口文件 ├── tsconfig.json # TypeScript 配置 ├── vite.config.ts # Vite 配置 └── package.json ``` #### 3. 配置文件代码 **tsconfig.json**: ```json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "moduleResolution": "Node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": ["ESNext", "DOM"], "types": ["vite/client", "node"], "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "electron/**/*.ts"], "exclude": ["node_modules"] } ``` **vite.config.ts**: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, './src') } }, build: { outDir: 'dist', // 构建输出目录 assetsDir: '.', // 静态资源目录 }, base: './', // 相对路径确保Electron加载正确 }) ``` #### 4. Electron 主进程代码 **electron/main.ts**: ```typescript import { app, BrowserWindow, ipcMain } from 'electron' import path from 'path' // 处理环境变量 const isDevelopment = process.env.NODE_ENV !== 'production' let mainWindow: BrowserWindow | null = null function createWindow() { mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: false, contextIsolation: true, sandbox: true } }) // 根据环境加载不同内容 if (isDevelopment) { mainWindow.loadURL('http://localhost:5173') mainWindow.webContents.openDevTools() } else { mainWindow.loadFile(path.join(__dirname, '../dist/index.html')) } mainWindow.on('closed', () => { mainWindow = null }) } 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', () => { return app.getAppPath() }) ``` **electron/preload.ts**: ```typescript import { contextBridge, ipcRenderer } from 'electron' // 安全暴露API给渲染进程 contextBridge.exposeInMainWorld('electronAPI', { getAppPath: () => ipcRenderer.invoke('get-app-path'), // 添加更多API... }) ``` #### 5. Vue 应用代码 **src/main.ts**: ```typescript import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') ``` **src/App.vue**: ```vue <template> <div class="container"> <h1>Electron + Vite + Vue + TS</h1> <p>当前应用路径: {{ appPath }}</p> <button @click="getAppPath">获取应用路径</button> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' declare global { interface Window { electronAPI: any } } export default defineComponent({ setup() { const appPath = ref('') const getAppPath = async () => { try { appPath.value = await window.electronAPI.getAppPath() } catch (err) { console.error('获取路径失败:', err) } } return { appPath, getAppPath } } }) </script> <style> .container { text-align: center; padding: 2rem; } </style> ``` #### 6. package.json 脚本配置 ```json { "name": "electron-vite-vue-ts", "version": "1.0.0", "main": "electron/main.js", "scripts": { "dev": "concurrently -k \"vite\" \"wait-on http://localhost:5173 && cross-env NODE_ENV=development electron .\"", "build": "npm run build:renderer && npm run build:electron", "build:renderer": "vite build", "build:electron": "tsc electron/main.ts electron/preload.ts --outDir electron --module commonjs", "pack": "npm run build && electron-builder --dir", "dist": "npm run build && electron-builder" }, "dependencies": { "vue": "^3.3.0" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", "concurrently": "^8.0.1", "cross-env": "^7.0.3", "electron": "^25.0.0", "electron-builder": "^24.0.0", "typescript": "^5.0.0", "vite": "^4.0.0", "vue-tsc": "^1.0.0", "wait-on": "^7.0.1" }, "build": { "appId": "com.example.electron-vite-vue", "productName": "ElectronViteVue", "directories": { "output": "release" }, "files": [ "dist/**/*", "electron/**/*.js" ], "mac": { "category": "public.app-category.utilities" }, "win": { "target": "nsis" }, "linux": { "target": "AppImage" } } } ``` ### 项目使用说明 1. **开发环境运行**: ```bash npm run dev ``` 这将同时启动 Vite 开发服务器和 Electron 应用 2. **生产环境构建**: ```bash npm run build ``` 构建 Vue 应用和编译 Electron 主进程代码 3. **打包应用**: ```bash npm run dist ``` 使用 electron-builder 打包成可执行文件（输出到 release 目录） ### 关键配置解释 1. **并发开发**: - 使用 `concurrently` 同时运行 Vite 和 Electron - `wait-on` 确保 Electron 在 Vite 服务器就绪后启动 2. **安全通信**: - 主进程和渲染进程通过预加载脚本安全通信 - 使用 `contextIsolation` 防止直接暴露 Node.js API 3. **环境区分**: - 开发环境加载 `http://localhost:5173` - 生产环境加载打包后的 `dist/index.html` 4. **打包配置**: - `electron-builder` 负责打包应用 - 配置支持 Windows、macOS 和 Linux 平台 - 输出目录为 `release` ### 常见问题解决 1. **Electron 无法加载 Vue 页面**: - 确保 `vite.config.ts` 中设置了 `base: './'` - 检查构建路径是否正确 2. **TypeScript 类型错误**: - 安装 `@types/node` 提供 Node.js 类型 - 在 `tsconfig.json` 中正确配置路径别名 3. **打包后资源加载失败**: - 确保 `build.files` 包含所有必要文件 - 检查静态资源路径是否为相对路径 4. **进程通信问题**: - 确保预加载脚本正确暴露 API - 使用 `ipcRenderer.invoke` 而不是 `ipcRenderer.send` --- ###