使用Vue3开发Electorn桌面应用

环境搭建

确保Node.js版本≥16，安装Vue CLI和Electron Builder：

npm install -g @vue/cli
vue create vue-electron-project
cd vue-electron-project
vue add electron-builder

项目结构调整

默认生成的目录结构中：

/public         静态资源
/src            主应用代码/main         Electron主进程代码/renderer     Vue渲染进程代码/common       共享代码

主进程配置

修改src/main/background.js，配置窗口属性：

const win = new BrowserWindow({width: 1200,height: 800,webPreferences: {nodeIntegration: true,contextIsolation: false}
})

通信机制

使用ipcMain和ipcRenderer进行进程间通信：

// 主进程
ipcMain.handle('dialog:open', async () => {const { filePaths } = await dialog.showOpenDialog()return filePaths
})// 渲染进程
const files = await ipcRenderer.invoke('dialog:open')

生产环境打包

配置vue.config.js调整打包设置：

pluginOptions: {electronBuilder: {builderOptions: {appId: 'com.example.app',win: {target: 'nsis'}}}
}

原生API调用

通过contextBridge安全暴露API：

// preload.js
contextBridge.exposeInMainWorld('electronAPI', {openFile: () => ipcRenderer.invoke('dialog:open')
})// Vue组件
window.electronAPI.openFile()

调试技巧

开发时运行两个命令窗口：

npm run electron:serve  # 开发模式
npm run electron:build  # 生产构建

使用Vue DevTools和Electron的开发者工具组合调试。