使用electron将vue3网页项目包装成pc客户端

F2E_zeke2025-09-12 9:25

一、准备前工作

在项目的根目录 打开命令行工具 安装四个依赖库

electron-builder: 是执行命令打包成客户端所需要的工具

cross-env：该库让开发者只需要注重环境变量的设置，而无需担心平台设置

wait-on：等待资源，此处用来等待url可访问

java 复制代码 
npm install --save-dev electron electron-builder cross-env wait-on

安装报错的话

如果安装electron第三方库失败： 是因为：electron的安装并不依赖本地npm中registry所配置的镜像，需要增加名称为electron_mirror的镜像源

可按照一下方法执行：

1、cmd窗口执行:

java 复制代码 
 npm config edit

2、执行此命令之后会有弹出一个配置文件，只需将以下内容粘贴进配置文件保存即可

java 复制代码 
registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

如图所示：

3、粘贴保存之后，删除项目的node_modules文件夹

4、关闭cmd窗口，重新打开一个cmd(重新启动)

5、清除npm缓存

java 复制代码 
npm cache clean --force

6、重新安装第三方库

java 复制代码 
npm install --save-dev electron electron:build

二、准备工作完成之后，在项目根目录需要有俩个文件

俩个文件分别是main.js(主进程)、preload.js（渲染进程）。

在项目根目录创建electron文件夹

在项目根目录创建electron文件夹，里面存放main.js，preload.js俩js文件
为什么需要将main.js和preload.js放在项目根目录的某个文件夹下。因为在vue项目中也存在一个main.js文件避免搞混淆

java 复制代码 
// pc客户端main.js(主进程)
const { app, BrowserWindow, Menu } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;
 
function createWindow() {
    Menu.setApplicationMenu(null);
    // 创建浏览器窗口
    const mainWindow = new BrowserWindow({
        show: false,
        minWidth: 1440,
        minHeight: 900,
        webPreferences: {
            partition: String(+new Date()),
            preload: path.join(__dirname, "preload.js"),
        },
    });
    mainWindow.maximize();
    mainWindow.show();
    // 如果是开发环境就把当前运行的web端口做成客户端预览
    // 如果是生产环境就把打包后的index做成客户端预览
    mainWindow.loadURL(
        NODE_ENV === "development"
        ? "http://localhost:8090"
        : `file://${path.join(__dirname, "../dist/index.html")}`
    );
}
 
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow();
    app.on("activate", function () {
        // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
        // 打开的窗口，那么程序会重新创建一个窗口。
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});
 
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on("window-all-closed", function () {
    if (process.platform !== "darwin") app.quit();
});
java 复制代码 
// pc客户端preload.js(渲染进程)
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element) element.innerText = text
    }

    for (const dependency of ['chrome', 'node', 'electron']) {
        replaceText(`${dependency}-version`, process.versions[dependency])
    }
})

在vite.config.js中添加配置项

java 复制代码 
publicPath: './', // 防止electron打包后 页面空白
transpileDependencies: true, // 防止electron打包后 页面空白

如图所示：

在package.json中添加配置项

java 复制代码 
{
  "main": "electron/main.js", // 刚刚创建的main.js文件的路径
  "scripts": {
    "electron": "wait-on tcp:8090 && cross-env NODE_ENV=development electron .",
    "electron:build": "vite build --mode production && electron-builder"
  },
  // 以下是electron-builder的配置
  "build": {
    "appId": "com.test", // 应用程序的唯一标识符
    "productName": "electron打包测试", // 应用程序的名称
    "copyright": "Copyright © 2023", // 版权信息
    // macOS配置
    "mac": {
      "category": "public.app-category.utilities", // App Store 分类
      "icon": "public/icons/icon.icns" // macOS 应用图标文件
    },
    "win": {}, // windows配置 可以添加windows特定配置
    // 安装程序配置
    "nsis": {
      "oneClick": false, // 是否一键安装(无安装界面)
      "allowToChangeInstallationDirectory": true // 是否允许用户选择安装目录
    },
    // 包含文件
    "files": [
      "dist/**/*", // 包含dist目录下的所有文件(Vite构建输出)
      "electron/**/*" // 包含electron目录下的所有文件(主进程渲染进程代码)
    ],
    // 目录配置
    "directories": {
      "buildResources": "assets", // 构建资源目录(图标 证书等)
      "output": "dist_electron" // 构建输出目录
    }
  }
}

如图所示：

运行命令 npm run electron:build 打包

为了使项目和electron正常运行，需要先运行项目，使得其开发服务器的url可以正常访问，然后再开启electron去加载url。

打包成功后，会在根目录出现一个 dist_electron 文件夹，文件夹下会有一个 .exe 应用程序

关于mac，win和nsis配置 完整说明

java 复制代码 
"mac": {}
常用配置：
category: 应用分类
	"public.app-category.utilities" - 工具类
	"public.app-category.productivity" - 生产力工具
	"public.app-category.developer-tools" - 开发工具
	"public.app-category.graphics-design" - 图形设计
	"public.app-category.photography" - 摄影
	"public.app-category.music" - 音乐
	"public.app-category.video" - 视频
	"public.app-category.games" - 游戏
	"public.app-category.education" - 教育
	"public.app-category.business" - 商务
	"public.app-category.finance" - 财务
	"public.app-category.medical" - 医疗
	"public.app-category.news" - 新闻
	"public.app-category.social-networking" - 社交网络
	"public.app-category.reference" - 参考工具
	"public.app-category.sports" - 体育
	"public.app-category.travel" - 旅行
	"public.app-category.weather" - 天气
icon: 应用图标文件(.icns 文件路径)
target: 构建目标格式
	"dmg" - 磁盘镜像文件（推荐）
	"zip" - 压缩包格式
	"pkg" - 安装包格式
	"mas" - Mac App Store 发布版
	"mas-dev" - Mac App Store 开发版
	"dir" - 目录格式（用于测试）
identity: 代码签名身份
	null - 不进行代码签名
	"Developer ID Application: 你的名字 (TEAM_ID)" - 开发者证书
	"3rd Party Mac Developer Application: 第三方证书" - 第三方开发者证书

完整的 macOS 配置示例：
"mac": {
  "category": "public.app-category.utilities",
  "icon": "build/icon.icns",
  "target": [
    {
      "target": "dmg",
      "arch": ["x64", "arm64"]
    },
    {
      "target": "zip",
      "arch": ["x64", "arm64"]
    }
  ],
  "identity": null,
  "gatekeeperAssess": false,
  "hardenedRuntime": false,
  "artifactName": "${productName}-${version}-${arch}.${ext}",
  "minimumSystemVersion": "10.14.0",
  "darkModeSupport": true,
  "extendInfo": {
    "CFBundleURLTypes": [
      {
        "CFBundleURLName": "com.example.app",
        "CFBundleURLSchemes": ["myapp"]
      }
    ]
  }
}
java 复制代码 
"win": {} 
常用配置：
icon: windows应用图标(.ico文件 路径)
target: 构建目标格式
	'nsis' - 安装程序(.exe)
	'portable' - 便携版(无需安装)
	'appx' - Windows Store应用包
	'zip' - 压缩包格式
	'7z' - 7-Zip压缩包
	'tar.xz' - Tar.XZ压缩包
requestedExecutionLevel: 执行权限级别
	'asInvoker' - 以调用者权限运行(默认)
	'requireAdministrator' - 需要管理员权限
	'highestAvailable' - 使用最高可用权限
forceCodeSigning: 是否强制代码签名
	true - 强制代码签名,无证书则会失败
	false - 不强制,允许未签名的应用
signAndEditExecutable: 是否签名可执行文件
	true - 对可执行文件进行数字签名
	false - 不对可执行文件进行签名

完整的 Windows 配置示例：
"win": {
  "icon": "build/icon.ico",
  "target": [
    {
      "target": "nsis",
      "arch": ["x64"]
    },
    {
      "target": "portable",
      "arch": ["x64"]
    }
  ],
  "requestedExecutionLevel": "asInvoker",
  "forceCodeSigning": false,
  "signAndEditExecutable": false,
  "artifactName": "${productName}-${version}-${arch}.${ext}",
  "publisherName": "我的公司",
  "verifyUpdateCodeSignature": false
}
java 复制代码 
"nsis": {} 
常用配置：
installerIcon: 安装程序图标(.ico文件 路径)
uninstallerIcon: 卸载程序图标(.ico文件 路径)
createDesktopShortcut: 是否创建桌面快捷方式
	true - 为所有用户创建
	false - 不创建
	'always' - 总是创建
	'perUser' - 仅为当前用户创建
createStartMenuShortcut: 是否创建开始菜单快捷方式
	true - 为所有用户创建
	false - 不创建
	'always' - 总是创建
	'perUser' - 仅为当前用户创建

完整的 NSIS 配置示例：
"nsis": {
  "oneClick": false,
  "allowToChangeInstallationDirectory": true,
  "installerIcon": "build/installer.ico",
  "uninstallerIcon": "build/uninstaller.ico",
  "createDesktopShortcut": true,
  "createStartMenuShortcut": true,
  "shortcutName": "我的应用",              // 快捷方式名称
  "include": "build/installer.nsh",       // 自定义 NSIS 脚本
  "script": "build/installer.nsh",        // 自定义安装脚本
  "artifactName": "${productName}-${version}-Setup.${ext}", // 安装包文件名
  "deleteAppDataOnUninstall": false,      // 卸载时是否删除应用数据
  "runAfterFinish": true,                 // 安装完成后是否运行应用
  "menuCategory": false,                  // 是否在开始菜单中创建分类
  "allowElevation": true,                 // 是否允许提升权限
  "requestExecutionLevel": "asInvoker"    // 执行权限级别
}

打包成功后的输出的文件目录，及安装界面展示

相关推荐
TangAcrab2 小时前
记一次 electron 添加 检测 终端编码，解决终端打印中文乱码问题
前端·javascript·electron
小桥风满袖2 小时前
极简三分钟ES6 - ES7新增
前端·javascript
EndingCoder2 小时前
Electron 高级 UI：集成 React 或 Vue.js
react.js·ui·electron·前端框架
Asort2 小时前
JavaScript入门：从零开始理解其在前端开发中的核心作用
前端·javascript
江城开朗的豌豆2 小时前
前端数据流之争：React与Vue的"内心戏"大揭秘
前端·javascript·react.js
江城开朗的豌豆2 小时前
前端路由暗战：React与Vue的导航哲学对决
前端·javascript·react.js
鹏多多2 小时前
Vue移动端开发的适配方案与性能优化技巧
前端·javascript·vue.js
王琦03182 小时前
Python 0909
前端·javascript·python
ss2733 小时前
基于Springboot + vue实现的高校大学生竞赛项目管理系统
vue.js·spring boot·后端
热门推荐
01conda中设置镜像地址（附所有可换的地址）02UV安装并设置国内源03A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程04UV 工具安装与国内镜像源配置指南05保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）06GitHub 镜像站点07突破百度网盘的下载限速，两种方法教会你【超详细】08KGG转MP3工具|非KGM文件|解密音频09解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题10教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员