从零入门到实战避坑：Electron跨平台开发深度解读

// 主进程（main.js）：监听渲染进程发来的"save-file"事件
const { app, BrowserWindow, ipcMain } = require('electron');
let win;

app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
  
  ipcMain.on('save-file', (event, content) => {
    // 调用Node.js的fs模块保存文件
    require('fs').writeFileSync('data.txt', content);
    event.reply('file-saved', '文件保存成功！');
  });
});

// 渲染进程（index.js）：发送"save-file"事件给主进程
const { ipcRenderer } = require('electron');
document.querySelector('#saveBtn').addEventListener('click', () => {
  const content = document.querySelector('#editor').value;
  ipcRenderer.send('save-file', content);
  
  ipcRenderer.on('file-saved', (event, message) => {
    alert(message);
  });
});

# 安装Node.js（https://nodejs.org/）后验证
node -v && npm -v

# 使用Vue CLI创建前端项目
npm install -g @vue/cli
vue create my-electron-app
cd my-electron-app

# 添加Electron Builder依赖
npm install electron electron-builder --save-dev

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      // 关键配置：启用上下文隔离提升安全
      contextIsolation: true,
      // 通过预加载脚本桥接主进程与渲染进程
      preload: path.join(__dirname, 'preload.js')
    }
  });
  
  // 加载Vue应用的index.html
  win.loadURL(process.env.ELECTRON_START_URL || 
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: 'file:',
      slashes: true
    })
  );
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit);

{
  "scripts": {
    "serve": "vue-cli-service serve", // 开发模式
    "build": "vue-cli-service build && electron-builder", // 生产构建+打包
    "electron:start": "vue-cli-service build && electron ."
  },
  "build": {
    "appId": "com.example.electronapp",
    "productName": "MyElectronApp",
    "directories": {
      "build": "build"
    },
    "files": [
      "**/*",
      "!src",
      "!public"
    ],
    "win": {
      "target": "nsis", // 生成Windows安装程序
      "icon": "public/icon.ico"
    },
    "mac": {
      "target": "dmg", // 生成Mac DMG安装包
      "icon": "public/icon.icns"
    }
  }
}

# 开发调试（Vue + Electron热重载）
npm run electron:start

# 生产打包（生成Windows/macOS/Linux安装包）
npm run build

// 主进程
ipcMain.handle('get-data', async (event, id) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`数据${id}`), 500); // 模拟异步
  });
});

// 渲染进程（Vue组件）
import { ipcRenderer } from 'electron';
export default {
  methods: {
    async fetchData() {
      const result = await ipcRenderer.invoke('get-data', 1001);
      this.data = result; // 直接更新状态，无需手动处理回调
    }
  }
}

// 使用electron-root-path获取主进程根目录（避免路径错误）
const path = require('path');
const { app } = require('electron');
global.__static = app.isPackaged
  ? path.join(__dirname, '/static')
  : path.join(__dirname, '../../public/static');

// 打包时确保二进制模块（如sqlite3）被打入asar包
// 在package.json的build配置中添加
"extraResources": [
  {
    "from": "node_modules/sqlite3/lib/binding",
    "to": "bindings",
    "filter": ["**/*"]
  }
]

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
      .set('~preload', path.join(__dirname, 'preload.js'));
  }
};

// preload.js（预加载脚本）
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
  // 将Node.js的fs模块封装为安全接口
  readFile: (path) => ipcRenderer.invoke('read-file', path),
  // 允许渲染进程直接调用的函数
  allowedFunc: () => console.log('安全调用！')
});

// 渲染进程（Vue组件）
window.api.readFile('/data.txt').then(content => console.log(content));

// 主进程
const { Menu, app } = require('electron');
const menuTemplate = [
  {
    label: app.name,
    submenu: [
      { role: 'about' }, // 自动生成关于面板
      { type: 'separator' },
      { role: 'services' },
      { type: 'separator' },
      { role: 'hide' },
      { role: 'hideothers' },
      { role: 'unhide' },
      { type: 'separator' },
      { role: 'quit' }
    ]
  },
  {
    label: '编辑',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' }
    ]
  }
];

Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplate));

// 主进程
const { autoUpdater } = require('electron-updater');
autoUpdater.checkForUpdatesAndNotify(); // 自动检查更新并弹出通知

// 配置package.json（指向更新服务器）
"updates": {
  "feed": "https://your-server.com/update/${os}/${arch}"
}