vue2（webpack）集成electron和 electron 打包

前言

之前发过一篇vue集成electron的文章，但是用vue3+vite实现的，在vue2+webpack工程可能不适用，所以这篇文章就主要介绍vue2+webpack集成electron方法

创建项目

vue create vue-electron-demo

目录架构

vue-electron-demo/
├── src/               
├── electron/           # Electron
│   ├── main/           # 主进程代码
│   ├── preload/        # 预加载脚本
│   └── resources/      # 图标等资源
├── src-shared/         # 跨平台共享代码
├── public/
└── vue.config.js  

安装依赖

注意兼容问题，且node版本太低如nodejs14以下不行

npm install --save-dev electron vue-cli-plugin-electron-builder
npm install --save path-browserify

实现代码

vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path')module.exports = defineConfig({transpileDependencies: true,publicPath: process.env.NODE_ENV === 'production' ? './' : '/',configureWebpack: {resolve: {alias: {'@shared': path.resolve(__dirname, 'src-shared'),'path': 'path-browserify'  // Web 端兼容 path}}},pluginOptions: {electronBuilder: {mainProcessFile: './electron/main/index.js',preload: 'electron/preload/preload.js',builderOptions: {productName: 'ElectronDemo',appId: 'com.example.electrondemo',win: {icon: 'electron/resources/icon.ico',target: 'nsis'},files: ["**/*","dist/**/*",{from: "electron/resources",to: "resources"  // 资源文件打包}],// 关键：适配打包规则asar: true,nodeGypRebuild: false,buildDependenciesFromSource: false,extraResources: [{from: "dist",          // Vue 构建输出的目录to: "dist",            // 目标路径（位于 resources 下）filter: ["**/*"]}]}}}
})

修改package.json

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","electron:build": "vue-cli-service electron:build  mode=ELECTRON","electron:serve": "vue-cli-service electron:serve"},"main": "background.js",

electron\main\index.js

const { app, BrowserWindow } = require('electron')
const path = require('path')// 禁用旧版安全警告（开发环境）
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true'// 窗口创建函数（适配 Electron 21）
function createWindow() {const win = new BrowserWindow({width: 1200,height: 800,webPreferences: {nodeIntegration: false,          // 必须禁用contextIsolation: true,          // 强制启用preload: path.join(__dirname, '../preload/preload.js')}})// 加载页面（区分开发/生产环境）if (process.env.WEBPACK_DEV_SERVER_URL) {win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)win.webContents.openDevTools()} else {win.loadFile(path.join(__dirname, '..', 'dist', 'index.html'))}
}// 生命周期管理
app.whenReady().then(createWindow)
app.on('window-all-closed', () => process.platform !== 'darwin' && app.quit())
app.on('activate', () => BrowserWindow.getAllWindows().length === 0 && createWindow())

electron\preload\preload.js

const { contextBridge, ipcRenderer } = require('electron')// 安全暴露 API 给渲染进程（Electron 21+ 强制要求）
contextBridge.exposeInMainWorld('electronAPI', {platform: process.platform,showDialog: (options) => ipcRenderer.invoke('dialog:show', options)
})

运行脚本

开发环境 （本地运行）

npm run electron:serve

生产环境 （打包）

npm run electron:build

打包结果

打开后项目也能正常运行