VUE 项目通过electron-builder打包成桌面应用

参考资料：
打包步骤
踩坑

前语：由于客户不希望记住地址，想把网站打包成桌面应用，可以直接打开。调研了一下，有2种比较常见工具，Pake和Electron，当然Electron名气大一点。

Pake：试过，打包出来很小，命令cli就可以出结果，使用简单，但原理是利用了电脑本地浏览器，所以会有浏览器不兼容的运行情况
Electron：将浏览器一起打包，即内嵌 Chromium，兼容器比较好，因此运行包也会比较大，大100M左右

说明：本步骤，只是纯粹将前端包打包成应用，不做开发调试，开发调试可以直接使用web，与原来前端开发一样

参考资料：

electron-builder官网文档：https://www.electron.build/

源码：https://github.com/electron-userland/electron-builder

打包步骤

前端代码，已经 build 在 dist-prod

安装依赖

先安装2个必备依赖，electron 和 electron-builder

复制代码

pnpm install electron --save-dev
pnpm install electron-builder --save-dev

创建配置文件

在前端代码根目录，创建一个文件夹electron，文件夹下面创建一个文件 main.js

js 复制代码

// main.js
// 导入 Electron 模块、路径模块
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
// 声明主窗口变量
let mainWindow = null
// 隐藏菜单栏，按需修改
Menu.setApplicationMenu(null)

/**
 * 创建主窗口
 */
function createWindow() {
  // 创建 BrowserWindow 实例，并配置窗口属性
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    icon: path.join(__dirname, '../dist-prod/icon.ico'),
    webPreferences: {
      nodeIntegration: false, // 禁用 Node.js 集成
      contextIsolation: true, // 启用上下文隔离
      enableRemoteModule: false // 禁用远程模块
    }
  })

    // 加载打包后的 HTML 文件
    mainWindow
      .loadFile(path.resolve(__dirname, '../dist-prod/index.html'))
      .catch((err) => console.error('加载生产环境文件失败:', err))
}

// 单实例锁
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event, commandLine, workingDirectory) => {
    focusMainWindow()
  })

  // 当 Electron 初始化完成时创建窗口
  app.whenReady().then(() => {
    createWindow()

    // macOS 上，当用户点击 dock 图标并且没有其他窗口打开时，重新创建一个窗口
    app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
}

// 当所有窗口关闭时退出应用
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

/**
 * 聚焦主窗口
 */
function focusMainWindow() {
  if (mainWindow) {
    if (mainWindow.isMinimized()) mainWindow.restore()
    mainWindow.focus()
    mainWindow.show()
  }
}

在根目录下再创建一个文件 electron-builder.json5

json 复制代码

{
  appId: 'id.yourApp',
  productName: 'your-app-name',
  icon: './dist-prod/icon.ico',
  files: ['./electron/main.js', './dist-prod'],
  extraFiles: [
    {
      from: './dist-prod/icon.ico',
      to: './'
    }
  ],
  directories: {
    output: './release/${version}'
  },
  win: {
    icon: './dist-prod/icon.ico',
    target: ['nsis', 'zip', 'portable'],
    asar: true,
    extraResources: ['./dist-prod/icon.ico'],
    requestedExecutionLevel: 'asInvoker'
  },
  appx: {
    publisher: 'your name'
  },
  nsis: {
    oneClick: false,
    perMachine: false,
    allowElevation: true,
    allowToChangeInstallationDirectory: true,
    createDesktopShortcut: true,
    createStartMenuShortcut: true,
    runAfterFinish: true,
    shortcutName: 'your-app-name',
    installerIcon: './dist-prod/icon.ico',
    uninstallerIcon: './dist-prod/icon.ico'
  }
}

说明：

复制代码

    {
      from: './dist-prod/icon.ico',
      to: './'
    }

这个就是将./dist-prod/icon.ico 拷贝的win-unpacked文件夹下面，这时候exe文件就会自动加载这个icon，根据官网描述，exe图标会自动加载图标名字为 icon.ico或icon.png

target: ['nsis', 'zip', 'portable'], 这个是打包出来三个结果，nsis是安装包，双击即可按步骤安装到电脑，zip会把win-unpacked压缩成zip(有点类似绿色版)，portable是单独可执行文件（就一个文件，双击即可打开）

在 package.json 增加以下内容

json 复制代码

{
  "name": "your-app-name",
  "version": "1.0.9",
  "icon": "public/icon.ico",
  "main": "electron/main.js",
  "description": "应用中文名",
  ...
  "scripts": {
    "i": "pnpm install",
    "dev": "vite --mode env.local",
    "dev-server": "vite --mode dev",
    "build:app": "electron-builder",
    ...
   }
}

其中几个关键的地方：

version：版本号，最后会一起打包出来的，并且生成目录是release/{version}。

在electron-builder.json5 已经配置了output: './release/${version}'

"main": "electron/main.js", 这个是指向了上面创建的文件，如果在其他地方创建了mian.js ，那么在这里指定即可

scripts增加一个脚本命令："build:app": "electron-builder",

后面可以直接使用：

复制代码

npm run build:app

打包结果

复制代码

npm run build:app

执行这个之后，会在release文件夹下面生成对应打包结果

踩坑

安装的过程，可能会遇到从github下载依赖，但可能网络问题下载不了，解决：

如果使用powershell，则可以先配置2个环境变量

复制代码

 $env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
 $env:ELECTRON_BUILDER_BINARIES_MIRROR="https://npmmirror.com/mirrors/electron-builder-binaries/"

即让其从淘宝镜像下载

或者在前端代码根目录下，创健文件.npmrc

复制代码

registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

至此，打包就完成了，更多的配置项，建议查阅官网