环境搭建

确保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的开发者工具组合调试。