前端web项目使用electron和electron-builder生成桌面应用

已于 2022-06-30 21:38:15 修改
阅读量1.8k 收藏 8
点赞数 1
文章标签： vue electron gulp
于 2022-05-18 00:06:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35272898/article/details/124784737
版权

背景

需求推进技术探索，技术实现需求设计。刚开始本来是用 vue 做一个 web 项目，随着开发推进，产品要求做成桌面端应用。。。
想到了用 Electron 框架构建桌面应用程序，查了一下大多都是使用 Electron 一步步构建项目，把已有 web 项目打包成桌面应用文档比较少，不过也找到一篇不错的文档，下面记录一下踩坑过程。

参考文章

Electron 文档
Electron API 文档
利用electron和electron-builder把前端web项目生成桌面程序

实现过程

准备工作

  1. 安装Node.js，使用最新的LTS版本
  2. 打包后的 web 项目
  3. 开发之前最好把 Electron 官方文档看一下，官方文档还是最权威的

配置淘宝镜像

原镜像下载可能太慢或下载失败，可将 npm 和 electron 的镜像地址都切换为淘宝镜像，cmd 命令输入：

npm config edit

将下面的地址复制、粘贴、保存、关闭

registry=http://registry.npm.taobao.org/
electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

配置截图

Electron 项目结构

.
├─icons						# icon 图标目录
├─node_modules
├─h5						# vue 资源
├─gulpfile.js  				# gulp 配置文件
├─main.js  					# 应用程序的入口文件
├─package.json
├─README.md

创建应用程序

新建目录并进入

# windows
mkdir my-electron-app && cd my-electron-app

复制的官方文档，运行居然报错，PowerShell 提示：标记 “&&” 不是此版本中的有效语句分隔符
在这里插入图片描述
将命令行语句中的 && 改为分号 ; 就好了

# windows
mkdir my-electron-app; cd my-electron-app

创建 package.json 文件

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "author": "freeman",
  "description": "electron app",
  "private": false,
  "scripts": {
    "view": "cross-env ELECTRON_ENV=dev electron .",
    "start": "cross-env ELECTRON_ENV=dev .\\node_modules\\.bin\\gulp watch:electron",
    "build": "cross-env ELECTRON_ENV=dep electron-builder"
  },
  "main": "main.js",
  "build": {
    "productName": "my electron app",
    "appId": "com.wss.app",
    "directories": {
      "output": "builder"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./h5/favicon.ico",
      "uninstallerIcon": "./h5/favicon.ico",
      "installerHeaderIcon": "./h5/favicon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ]
    },
    "files": [
      "h5/**/*",
      "main.js"
    ]
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "electron": "^16.0.7",
    "electron-builder": "^22.14.5",
    "electron-connect": "^0.6.3",
    "gulp": "^4.0.2"
  }
}

package.json 代码解析

  • 启动命令设置
    这里我安装了cross-env，运行开发环境和打包时方便指定环境变量，同时引入了gulp配置热更新，编辑代码自动刷新应用
    热更新参考
"scripts": {
  "view": "cross-env ELECTRON_ENV=dev electron .",
  "start": "cross-env ELECTRON_ENV=dev .\\node_modules\\.bin\\gulp watch:electron",
  "build": "cross-env ELECTRON_ENV=dep electron-builder"
},

  • 设置入口文件为main.js

  • 打包相关配置

"build": {
  "productName": "my electron app",  // 项目名 这也是生成的exe文件的前缀名
  "appId": "com.wss.app",  // 包名  
  "directories": {  // 输出文件夹
    "output": "builder"
  }, 
  "nsis": {
    "oneClick": false,  // 是否一键安装
    "allowElevation": true,  // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
    "allowToChangeInstallationDirectory": true,  // 允许修改安装目录
    "installerIcon": "./h5/favicon.ico",  // 安装图标
    "uninstallerIcon": "./h5/favicon.ico",  // 卸载图标
    "installerHeaderIcon": "./h5/favicon.ico",  // 安装时头部图标
    "createDesktopShortcut": true,  // 创建桌面图标
    "createStartMenuShortcut": true  // 创建开始菜单图标
  },
  "win": {
    "target": [
      "nsis",
      "zip"
    ]
  },
  "files": [
    "h5/**/*",  // 要打包的目录
    "main.js"
  ]
}

关于Electron项目出现白屏，控制台输出 Failed to load resource: net::ERR_FILE_NOT_FOUND 问题

  • npm run start运行时出现：
    执行npm run start，窗口出现白屏，控制台输出找不到资源，可能是 vue 项目的publicPath路径配置不对（vue 项目通过 npm run build 打包以后页面没有内容）
  • npm run build打包之后出现白屏：
    files 里面要打包的目录可能指定错了，没有把我们要打包的目录指定对，electron-build 就不会将build文件夹打包进去 app.asar 文件里，这样安装完.exe文件之后，控制台可能输出Not allowed to load local resource:，桌面程序打开白屏。

参考：electron-builder 打包后 出现Not allowed to load local resource:

  • 安装 npm 包
    我是安装的最新版Node.js，npm依赖我都是安装在devDependencies里，如果刚开始安装在dependencies，打包的时候也会提示放到devDependencies
"devDependencies": {
  "cross-env": "^7.0.3",
  "electron": "^16.0.7",
  "electron-builder": "^22.14.5",
  "electron-connect": "^0.6.3",
  "gulp": "^4.0.2"
}

创建 gulpfile.js

因为想要实现热更新，安装了gulp，还需要创建gulpfile.js配置文件,这里只监听了main.js

const gulp = require('gulp');
const electron = require('electron-connect').server.create();
 
gulp.task('watch:electron', function () {
    electron.start();
    gulp.watch(['./main.js'], electron.restart);
});

引入 web 项目

vue 项目路由模式使用hash，将打包后的 vue 资源放到 electron 项目根目录

创建 main.js 文件

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

// app.isPackaged 如果应用已打包，则返回的属性，此属性可用于区分开发和生产环境
const isDevelopment = !app.isPackaged;
if(isDevelopment) {
  try {
    const client = require('electron-connect').client;
  } catch (err) {
  }
}

// 屏蔽安全告警在console控制台的显示
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

if (process.mas) app.setName('My Electron')

let mainWindow

function createWindow() {
  const displayWorkAreaSize = screen.getAllDisplays()[0].workArea
  const windowOptions = {
    x: displayWorkAreaSize.x,  // 窗口相对于屏幕的左偏移位置.默认居中
    y: displayWorkAreaSize.y,  // 窗口相对于屏幕的顶部偏移位置.默认居中
    width: displayWorkAreaSize.width,
    height: displayWorkAreaSize.height,
    minWidth: 1220,
    minHeight: 780,
    show: false,
    // movable: false,  // 窗口是否可以拖动
    // maximizable: false,  // 窗口是否可以最大化
    // titleBarStyle: 'hidden',
    frame: true,  // 指定 false 来创建一个 Frameless Window
    title: app.getName(),
    icon: path.join(__dirname, '/icons/icon.png'),  // 托盘图标
    hasShadow: false,  // 窗口是否有阴影
    autoHideMenuBar: true,  // 自动隐藏菜单栏
    webPreferences: {
      devTools: process.env.ELECTRON_ENV == "dev",// 是否开启 DevTools
      webSecurity: true,  // //允许跨域
      plugins: true,  // 是否开启插件支持
      experimentalFeatures: true,  // 开启 Chromium 的 可测试 特性
      experimentalCanvasFeatures: true,  // 开启 Chromium 的 canvas 可测试特性
      minimumFontSize: 10,
    },
  }

  if (process.platform === 'linux') {
    windowOptions.icon = path.join(__dirname, '/h5/favicon.ico')
  }

  mainWindow = new BrowserWindow(windowOptions)
  mainWindow.loadURL(path.join('file://', __dirname, '/h5/index.html'))
  // 设置窗口默认最大化
  mainWindow.maximize()
  // 设置用户是否可以调节窗口尺寸
  // mainWindow.setResizable(false)
  mainWindow.show()

  mainWindow.on('closed', function () {
    mainWindow = null
  })

  process.env.ELECTRON_ENV == "dev" && client.create(mainWindow);
}

app.on('ready', function () {
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu) // 设置菜单部分
  createWindow()
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

app.on('browser-window-created', function () {
  let reopenMenuItem = findReopenMenuItem()
  if (reopenMenuItem) reopenMenuItem.enabled = false
})

app.on('window-all-closed', function () {
  let reopenMenuItem = findReopenMenuItem()
  if (reopenMenuItem) reopenMenuItem.enabled = true
  app.quit()
})

/**
 * 注册键盘快捷键
 */
let template = [
  {
    label: '操作',
    submenu: [
      {
        label: '回到系统入口',
        accelerator: 'CmdOrCtrl+Q',
        click: function (item, focusedWindow) {
          if (focusedWindow.id === 1) {
            BrowserWindow.getAllWindows().forEach(function (win) {
              if (win.id > 1) {
                win.close()
              }
            })
          }
          focusedWindow.loadURL(path.join('file://', __dirname, '/h5/index.html'))
        }
      }, {
        label: '复制',
        accelerator: 'CmdOrCtrl+C',
        role: 'copy'
      }, {
        label: '粘贴',
        accelerator: 'CmdOrCtrl+V',
        role: 'paste'
      }, {
        label: '重新加载',
        accelerator: 'CmdOrCtrl+R',
        click: function (item, focusedWindow) {
          if (focusedWindow) {
            // on reload, start fresh and close any old
            // open secondary windows
            if (focusedWindow.id === 1) {
              BrowserWindow.getAllWindows().forEach(function (win) {
                if (win.id > 1) {
                  win.close()
                }
              })
            }
            focusedWindow.reload()
          }
        }
      }
    ]
  },
  {
    label: '窗口',
    role: 'window',
    submenu: [
      {
        label: '切换全屏',
        accelerator: 'F11',
        role: 'togglefullscreen',
        // click: function (item, focusedWindow) { // 自定义 click 和使用 role 效果是一样的
        //   if (focusedWindow) {
        //     focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
        //   }
        // }
      }, {
        label: '最小化',
        accelerator: 'CmdOrCtrl+M',
        role: 'minimize'
      }, {
        label: '关闭',
        accelerator: 'CmdOrCtrl+W',
        role: 'close'
      }
    ]
  },
  {
    label: '帮助',
    role: 'help',
    submenu: [{
      label: '意见反馈',
      click: function () {
        electron.shell.openExternal('https://www.electronjs.org/zh/docs/latest/api/app')
      }
    }]
  }
]

function findReopenMenuItem() {
  const menu = Menu.getApplicationMenu()
  if (!menu) return

  let reopenMenuItem
  menu.items.forEach(function (item) {
    if (item.submenu) {
      item.submenu.items.forEach(function (item) {
        if (item.key === 'reopenMenuItem') {
          reopenMenuItem = item
        }
      })
    }
  })
  return reopenMenuItem
}

// 设置是否显示 DevTools
if(process.env.ELECTRON_ENV == "dev") {
  template[1].submenu.push({
    label: '切换开发者工具',
    role: 'toggleDevTools'
  })
}

// 针对Mac端的一些配置
if (process.platform === 'darwin') {
  const name = electron.app.getName()
  template.unshift({
    label: name,
    submenu: [{
      label: '退出',
      accelerator: 'Command+Q',
      click: function () {
        app.quit()
      }
    }]
  })

  // Window menu.
  template[3].submenu.push({
    type: 'separator'
  }, {
    label: 'Bring All to Front',
    role: 'front'
  })

  // addUpdateMenuItems(template[0].submenu, 1)
}

// 针对Windows端的一些配置
if (process.platform === 'win32') {
  const helpMenu = template[template.length - 1].submenu
  // addUpdateMenuItems(helpMenu, 0)
}

main.js 代码解析

main.js配置项可对照 Electron API 文档设置。本项目是把已有的 vue 项目打包，不是完全开发 Electron 应用，窗口菜单选项只能配置，不方便完全自定义。

  • 运行时启动热更新
// main.js
process.env.ELECTRON_ENV == "dev" && client.create(mainWindow);
  • 配置程序托盘图标
    不配置图标将使用系统默认的
function createWindow() {
  const windowOptions = {
    // ...
    icon: path.join(__dirname, '/icons/icon.png'),  // 托盘图标
    // ...
  }
}

配置图标这里需要注意，根据官方文档 nativeImage说明，eletron 可以设置大小为 32x32、64x64 。。。等一些尺寸的图标，但是同样指定一个 6464 的png，通过npm run build打包发现报错 （必需为256256），同时还发现只添加一张照片也不行，会报错，于是指定了三张不同尺寸的 icon 图片。
build 报错截图：build 报错截图
icons 目录截图：
在这里插入图片描述

  • 指定index.html位置
mainWindow.loadURL(path.join('file://', __dirname, '/h5/index.html'))

启动和打包应用程序

预览

npm run start

打包，打包输入目录在package.json中配置

npm run build

打包目录截图

记录

打包之后，报错 A JavaScript error occurred in the main process
报错
查了好久没有发现相关的问题，那就一定是项目中的配置存在问题，

通过图片发现是打包之后electron-connect报错，报错原因是因为electron-connect在开发环境安装的包，打包之后是不会安装的，生产引入未安装的包会报这种错，所以引入时要先判断下环境。

// main.js

// app.isPackaged 如果应用已打包，则返回的属性，此属性可用于区分开发和生产环境
const isDevelopment = !app.isPackaged;
if(isDevelopment) {
  try {
    const client = require('electron-connect').client;
  } catch (err) {
  }
}
勤奋刘哈哈
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Linux中，创建.desktop运行程序的快捷方式
楚轩的博客
05-09 3939
在 Linux 中，一个 .desktop 文件就是一个用来运行程序的快捷方式。 .desktop 文件基本上就是一个包含程序信息的纯文本文件 根据可见用户不同，将.desktop文件放在不同的目录中: 自己可见: ~/.local/share/applications/ 所有用户可见: /usr/share/applications/ 在我目前做的项目是一个使用PyQt5编写的GUI，通过以下步...
【Electron】使用Electron将web项目打包成桌面应用程序
go
08-16 4610
执行打包命令： electron-packager . app --win --out sysApp --arch=x64 --electron-version 1.4.14 --overwrite --ignore=node_modules
electron-builder 打包配置
最新发布
一切都不太晚
05-21 1552
NSIS（Nullsoft Scriptable Install System）是一个开源的 Windows 系统下安装程序制作程序。它提供了安装、卸载、系统设置、文件解压缩等功能。NSIS 通过它的脚本语言来描述安装程序的行为和逻辑的。NSIS 的脚本语言和通常的编程语言有类似的结构和语法，但它是为安装程序这类应用所设计的。
Electron-builder打包和自动更新
王谷雨的博客
08-14 3005
文本主要讲述如何为 electron 打包出来软件配置安装引导和结合 github 的 release 配置自动更新
转载参考贴（使用electron-builder对Electron项目进行打包）
zy103118的博客
06-17 2137
electron
vue+electron 打包发布
myang147258的博客
07-14 2144
Electron是什么？Electron 是 GitHub 开发的一个开源框架，是网页应用 (web apps) 的一个原生包装层，它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。Electron 可以用于构建具有 HTML、CSS、JavaScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序可以打包到 Mac、Windows 和 Linux 系统上。
基于Electron的桌面端应用开发和实践
逸尘的专栏
12-06 7788
先简单介绍一下electron。electron是由Github开发的开源框架，现在由OpenJS基金会维护的一个开源项目。它允许开发者使用 HTML、CSS 和 JavaScript 来构建跨平台的桌面应用，而且构建出来的应用，可以很好地兼容 Mac、Windows 和 Linux 这些主流的操作系统。
Electron 分享（入门，安装，打包）
热门推荐
博客简介
12-03 1万+
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
electron-builder 相关资源
02-08
`electron-builder` 是一个强大的工具，用于构建跨平台的桌面应用程序，尤其是在JavaScript、Electron和前端框架（如React、Vue等）环境中。它提供了自动化打包、签名和发布流程，使得开发者能够轻松地将Web应用转化...
使用electron+vue集成跨平台桌面应用程序
03-17
5. **打包应用**：在项目准备好后，使用 `electron-builder` 进行打包，可以选择生成Windows、macOS或Linux的安装包。 6. **优化性能**：由于Electron使用的是Chromium，所以需要注意内存管理和资源消耗。可以考虑...
electron-img(图片旋转桌面应用)
03-14
**正文** ...综上所述，这个"electron-img(图片旋转桌面应用)"项目涵盖了Electron开发、图像处理、文件I/O、用户界面设计、事件驱动编程等多个IT领域的知识点，展示了Web技术在桌面应用开发中的强大能力。
electron-vue-build-package.zip
05-20
在现代软件开发中，Electron框架因其允许开发者使用Web技术构建跨平台桌面应用而备受青睐。Electron Vue是基于Electron和Vue.js的一个集成解决方案，它为开发者提供了一种简单、高效的构建桌面应用的方式。然而，...
electron-vue:electron简易开发桌面应用
05-25
Electron-Vue 是一个基于 Vue.js 和 Electron 的桌面应用程序开发框架，它结合了 Vue.js 的易用性和 Electron 的强大功能，使得开发者能够轻松构建跨平台的桌面应用。这个框架允许你利用前端开发的技术栈来开发桌面...
electron之打包自定义安装界面（electron-builder）
qq_33040483的博客
12-01 5911
1. 先添加配置 "nsis": { "include": "scripts/installer.nsi", "allowToChangeInstallationDirectory": true, "createDesktopShortcut": true, "oneClick": false, "menuCategory": false, "perMachine": true }, 2. 新建installer.nsi文件，写入下面的内容，这里面的
vue项目使用electron进行打包操作
qq_34170840的博客
05-13 7454
一、设置国内镜像 npm config edit 执行后会弹出npm的配置文档，将以下类容复制到文件末尾。 electron_mirror=https://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/ 二、创建vue框架文件 这里不详细说了，就是创建一个vue项目，如果已有项目则跳过这一步。
使用electron-builder打包exe
weixin_46018534的博客
03-14 541
之前使用electron-packager应用，但是electron-packager打包出来的直接就是安装好的程序，给他人安装不是很方便，所以这里再记录使用electron-builder打包生成.exe安装包的使用前面的uniapp配置还是一样的，主要不同就是package.json的配置。
eletron打包web项目教程（将react打包成桌面端应用程序）
ZHU18670324781的博客
08-15 1150
electron打包web项目教程（将react打包成桌面端应用程序）
electron-builder打包见解
weixin_34192993的博客
10-16 3853
开发electron客户端程序，打包是绕不开的问题。下面就我在工作中的经验以及目前对electron-builder的了解来分享一些心得。 基本概念 官网的定义 A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto...
electron-vue架构解析2-生产环境打包过程分析（原）
阿杜的专栏
06-11 3534
目录 我们先从生产环境打包流程来分析。 从package.json文件入口来看打包命令和调用的脚本： "scripts": { "build": "node .electron-vue/build.js", "build:darwin": "cross-env BUILD_TARGET=darwin nod
Electron应用使用electron-builder配合electron-updater代码
06-06
以下是使用Electron Builder和Electron Updater实现自动更新的示例代码： 首先，你需要安装electron-builder和electron-updater： ```bash npm install electron-builder electron-updater --save-dev ``` 然后，在你的主进程文件中，添加以下代码： ```javascript const { app, autoUpdater } = require('electron'); const { autoUpdater } = require('electron-updater'); // 设置更新服务器的地址 autoUpdater.setFeedURL({ provider: 'generic', url: 'http://your-update-server.com' }); // 在应用启动时检查更新 autoUpdater.checkForUpdatesAndNotify(); // 处理更新下载完成事件 autoUpdater.on('update-downloaded', () => { // 通知用户更新已经下载完成，可以安装更新 autoUpdater.quitAndInstall(); }); ``` 在渲染进程（例如你的网页或者界面）中，你可以添加以下代码来手动检查更新： ```javascript const { ipcRenderer } = require('electron'); // 发送事件给主进程来检查更新 ipcRenderer.send('check-for-updates'); // 监听主进程返回的更新状态 ipcRenderer.on('update-status', (event, status) => { if (status === 'update-available') { // 通知用户有新的更新可用，可以选择是否下载 } else if (status === 'update-downloading') { // 通知用户更新正在下载中 } else if (status === 'update-downloaded') { // 通知用户更新已经下载完成，可以安装更新 } else if (status === 'update-not-available') { // 通知用户没有新的更新可用 } }); ``` 最后，在你的Electron Builder配置文件中，添加以下配置： ```json { "mac": { "target": "zip", "category": "your-category" }, "win": { "target": "nsis", "icon": "path/to/icon.ico", "publisherName": "your-publisher-name", "verifyUpdateCodeSignature": false }, "linux": { "target": "AppImage" }, "publish": { "provider": "generic", "url": "http://your-update-server.com" } } ``` 这样，你就可以使用Electron Builder和Electron Updater来实现自动更新了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值