Electron桌面应用打包现有的vue项目

1 环境准备

  • Node：v16.20.2（本地vue项目nodejs版本）
  • Electron：22.3.7
  • vue：2

版本管理

2 Vue项目准备

  • 更新相关依赖
  • npm install --registry https://registry.npmmirror.com/
  • npm run dev

3、引入Electorn

  • 安装指定版本Electron：npm install electron --save-dev
  • 查看Electron版本：npx electron --version
注意：切换成国内源以及设置
  • 切换国内源：npm config set registry https://registry.npmmirror.com
  • 配置环境变量
    • ELECTRON_MIRROR:https://npmmirror.com/mirrors/electron/
    • ELECTRON_CUSTOM_DIR:{{ version }}

4、修改项目

4.1 根目录创建main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,},});win.loadFile(path.join(__dirname, 'dist/index.html')); // 修改为你的打包输出路径// 打开开发者工具win.webContents.openDevTools();
}app.whenReady().then(createWindow);
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
4.2 修改 package.json

在 package.json 中添加 Electron 启动脚本：

"main": "main.js",
"scripts": {"electron": "electron .","build": "vue-cli-service build" // 确保有这个构建命令
}
4.3 构建项目
npm run build

这将生成 dist 文件夹，包含生产环境的静态文件。

4.4 启动 Electron

npm run electron

5、使用内置web渲染vue

Electron 中启动一个内置的 Node.js Web 服务器来渲染用 Vue.js 编写的页面，可以使用 express 或其他类似的 Node.js Web 框架。以下是一个基本的实现步骤：

5.1 安装依赖

首先，确保您已安装 express 和 vue 相关的依赖。可以通过 npm 安装：

npm install express
5.2 设置 Express 服务器

在您的项目中创建一个新的文件，例如 server.js，并配置一个简单的 Express 服务器：

// server.js
const express = require('express');
const path = require('path');const app = express();
const PORT = 3000;// Serve static files from the Vue app
app.use(express.static(path.join(__dirname, 'dist')));// Handle all requests to serve the index.html file
app.get('*', (req, res) => {res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});app.listen(PORT, () => {console.log(`Server is running at http://localhost:${PORT}`);
});
5.3 修改 main.js

在主进程中，启动该服务器，并在 BrowserWindow 中加载它：

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const { exec } = require('child_process');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,},});// Load the local serverwin.loadURL('http://localhost:3000');
}app.whenReady().then(() => {// Start the serverexec('node server.js', (err, stdout, stderr) => {if (err) {console.error(`Error starting server: ${stderr}`);return;}console.log(stdout);});createWindow();
});// Quit when all windows are closed
app.on('window-all-closed', () => {app.quit();
});
5.4 确保构建 Vue 应用

确保在启动 Electron 应用之前，您已经构建了 Vue 应用（例如运行 npm run build），以便生成 dist 文件夹。

5.5 启动项目

最后，启动 your Electron 应用：

npm start

6、打包项目

如果您想打包成可执行文件，可以使用 Electron Builder 或 Electron Packager。安装 Electron Builder：

npm install electron-builder --save-dev

然后在 package.json 中添加打包配置：

{"name": "your-app-name","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","build": "vue-cli-service build", // 如果使用 Vue CLI"package": "electron-builder" // 如果使用 electron-builder},"devDependencies": {"electron": "^x.x.x", // 替换为您使用的版本"electron-builder": "^x.x.x" // 替换为您使用的版本}
}

打包命令：

npm run package

出错：

Get "https://github.com/electron/electron/releases/download/%7B%7B%20version%20%7D%7D/electron-v22.3.27-win32-ia32.zip": EOF
github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:206
github.com/develar/app-builder/pkg/download.(*Downloader).follow/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:234
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:128
github.com/develar/app-builder/pkg/download.(*Downloader).Download/Users/runner/work/app-builder/app-builder/pkg/download/downloader.go:112
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).doDownload/Users/runner/work/app-builder/app-builder/pkg/electron/electronDownloader.go:203
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).Download/Users/runner/work/app-builder/app-builder/pkg/electron/electronDownloader.go:188
github.com/develar/app-builder/pkg/electron.downloadElectron.func1.1/Users/runner/work/app-builder/app-builder/pkg/electron/electronDownloader.go:73
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2/Users/runner/work/app-builder/app-builder/pkg/util/async.go:68
runtime.goexit/Users/runner/hostedtoolcache/go/1.21.12/arm64/src/runtime/asm_386.s:1363⨯ D:\projects\qihangerp-weishop\app\node_modules\app-builder-bin\win\ia32\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE2024/10/2 00:22:26

在这里插入图片描述

原因分析：

  • 1、第一个错误是electron下载地址找错了。解决方案是：

    • 方案一：修改package.json修改正确的下载地址

        "build": {"electronDownload": {"mirror": "https://github.com/electron/electron/releases/download/"}},

    • 方案二：手动下载electron对应的版本包，放在C:\Users\qilip\AppData\Local\electron\Cache(直接将zip压缩包放进去)

  • 2、electron-builder打包需要的三个关键文件下载失败问题：

winCodeSign-2.6.0.7z
nsis-resources-3.4.1.7z
Get nsis-3.0.4.1.7z

解决方案：

  • 手动下载这三个包(https://github.com/electron-userland/electron-builder-binaries/releases?page=1)放到一下3个文件夹
    • C:\Users\qilip\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1
    • C:\Users\qilip\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1
    • C:\Users\qilip\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0

最后顺利打包成功

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/440712.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

算法剖析：双指针

算法剖析：双指针

文章目录 双指针算法一、 移动零1. 题目2. 算法思想3. 代码实现 二、 复写零1. 题目2. 算法思想3. 代码实现 三、 快乐数1. 题目2. 算法思想3. 代码实现 四、 盛水最多的容器1. 题目2. 算法思想3. 代码实现 五、有效三角形的个数1. 题目2. 算法思想3. 代码实现 六、 和为 s 的两…
阅读更多...
UART驱动学习三（TTY驱动部分源码解析）

UART驱动学习三（TTY驱动部分源码解析）

目录 全局框架图一、tty_io.c 分析1. 关键数据结构和定义2. 文件操作结构体3. 初始化和注册4. 读写操作5. 挂起和恢复6. 信号处理7. 设备类8. 控制台通知9. 辅助函数10. 代码功能11. 带有注释的部分tty_io.c源码 二、tty_ldisc.c 分析1. 关键数据结构和定义2. 行规程操作函数3.…
阅读更多...
Android车载——VehicleHal运行流程（Android 11）

Android车载——VehicleHal运行流程（Android 11）

1 概述 本篇主要讲解VehicleHal的主要运行流程，包括设置属性、获取属性、订阅属性、取消订阅、持续上报属性订阅等。 2 获取属性流程 2.1 获取属性流程源码分析 作为服务注册到hwServiceManager中的类是VehicleHalManager，所以，CarServic…
阅读更多...
判断是否为二叉排序树（二叉搜索树，二叉查找树）

判断是否为二叉排序树（二叉搜索树，二叉查找树）

1.判断给定的二叉树是否为二叉排序树&#xff0c;如果是返回1&#xff0c;不是返回0。 思想&#xff1a; 二叉树是左子树<根<右子树。中序遍历是递增有序&#xff0c;可以通过比较当前结点与前驱关系来进行判断。 代码&#xff1a; //pre为全局变量&#xff0c;保存当…
阅读更多...
数学与生活

数学与生活

多学科交叉 信号处理 小波 经济 政策 计算机 统计 信号处理与市场分析 经济与数据分析 政策与统计 过去的数学家没有一个是纯粹的数学家&#xff1b;生活中各方面工程的&#xff0c;物理的&#xff0c;天文&#xff0c;地理的&#xff0c;赌博&#xff0c;政治的&#xff1b…
阅读更多...
5-25 JQuery

5-25 JQuery

jQuery简介 jQuery是什么 jQuery基本语法 测试jQuery <head> <meta charset"utf-8"> <title>无标题文档</title><script type"text/javascript" src"jquery-3.5.1.js"></script><script type"tex…
阅读更多...
FastAdmin Apache下设置伪静态

FastAdmin Apache下设置伪静态

FastAdmin Apache下设置伪静态 一、引言 FastAdmin 是一个基于ThinkPHP和Bootstrap框架开发的快速后台开发框架&#xff0c;它以其简洁、高效、易于扩展的特点&#xff0c;广受开发者的喜爱。在部署FastAdmin项目时&#xff0c;为了提高访问速度和用户体验&#xff0c;我们通…
阅读更多...
Redis介绍及整合Spring

Redis介绍及整合Spring

目录 Redis介绍 Spring与Redis集成 Redis介绍 Redis是内存数据库&#xff0c;Key-value型NOSQL数据库&#xff0c;项目上经常将一些不经常变化并且反复查询的数据放入Redis缓存&#xff0c;由于数据放在内存中&#xff0c;所以查询、维护的速度远远快于硬盘方式操作数据&#…
阅读更多...
【NIO基础】基于 NIO 中的组件实现对文件的操作（文件编程），FileChannel 详解

【NIO基础】基于 NIO 中的组件实现对文件的操作（文件编程），FileChannel 详解

目录 1、FileChannel (1&#xff09;获取 FileChannel (2&#xff09;读取文件 (3&#xff09;写入文件 (4&#xff09;关闭通道 (5&#xff09;当前位置与文件大小 (6&#xff09;强制写入磁盘 2、两个 FileChannel 之间的数据传输 (1&#xff09;使用 transferTo()…
阅读更多...
leetcode-42. 接雨水 单调栈

leetcode-42. 接雨水 单调栈

给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表…
阅读更多...
微软发布Windows 11 2024更新，新型Copilot+ AI PC功能亮相

微软发布Windows 11 2024更新，新型Copilot+ AI PC功能亮相

前言 微软在Windows 11的2024更新中加强了对人工智能的应用&#xff0c;推出了新功能Copilot。 此次更新的版本号为26100.1742&#xff0c;Copilot将首先在Windows Insider中推出&#xff0c;计划于11月向特定设备和市场推广&#xff0c;用户需开启“尽快获取最新更新”选项以…
阅读更多...
RESTful风格接口+Swagger生成Web API文档

RESTful风格接口+Swagger生成Web API文档

RESTful风格接口Swagger生成Web API文档 文章目录 RESTful风格接口Swagger生成Web API文档1.RESTful风格接口RESTful简介RESTful详细图示常见http状态码springboot实现RESTfulRESTful springboot设计实例demo 2.Swagger生产Web API文档Swagger简介使用Swagger1.加入依赖2.配置S…
阅读更多...
基于STM32的超声波测距仪设计

基于STM32的超声波测距仪设计

引言 本项目将基于STM32微控制器设计一个超声波测距仪&#xff0c;通过超声波传感器实现距离测量&#xff0c;并将结果显示在液晶屏上。该项目展示了STM32微控制器与超声波传感器、LCD显示器的接口通信&#xff0c;以及信号处理和距离计算的过程。 环境准备 1. 硬件设备 ST…
阅读更多...
技术速递｜Python in Visual Studio Code 2024年9月发布

技术速递｜Python in Visual Studio Code 2024年9月发布

排版&#xff1a;Alan Wang 我们很高兴地宣布将于 2024 年 9 月发布适用于 Visual Studio Code 的 Python 和 Jupyter 扩展&#xff01; 此版本包括以下公告&#xff1a; Django 单元测试支持使用 Pylance 从 inlay 提示转到定义 如果您有兴趣&#xff0c;可以在我们的 Pyth…
阅读更多...
提升 CI/CD 稳定性：Jenkins 开机自检与推送通知

提升 CI/CD 稳定性：Jenkins 开机自检与推送通知

简介&#xff1a;Jenkins 是一个广泛使用的开源自动化服务器&#xff0c;常用于持续集成和持续交付。在某些情况下&#xff0c;服务器重启可能导致 Jenkins 构建任务中断或失败。为了解决这个问题&#xff0c;可以使用一个自检服务&#xff0c;定期检查系统的启动时间&#xff…
阅读更多...
算法题总结（十）——二叉树上

算法题总结（十）——二叉树上

#二叉树的递归遍历 // 前序遍历递归LC144_二叉树的前序遍历 class Solution {public List<Integer> preorderTraversal(TreeNode root) {List<Integer> result new ArrayList<Integer>(); //也可以把result 作为全局变量&#xff0c;只需要一个函数即可。…
阅读更多...
Open3D实现点云数据的序列化与网络传输

Open3D实现点云数据的序列化与网络传输

转载自个人博客&#xff1a;Open3D实现点云数据的序列化与网络传输 在处理点云数据的时候&#xff0c;有时候需要实现点云数据的远程传输。当然可以利用传输文件的方法直接把点云数据序列化成数据流进行传输&#xff0c;但Open3D源码在实现RPC功能时就提供了一套序列化及传输的…
阅读更多...
今日指数day8实战补充用户管理模块(下)

今日指数day8实战补充用户管理模块(下)

ps : 由于前端将userId封装为BigInt类型 , 导致有精度损失, 传入的userId不正确 , 部分功能无法正确实现 , 但是代码已经完善 1.4 更新用户角色信息接口说明 1&#xff09;原型效果 2&#xff09;接口说明 功能描述&#xff1a;更新用户角色信息 服务路径&#xff1a;/user/…
阅读更多...
vue-scrollto实现页面组件锚点定位

vue-scrollto实现页面组件锚点定位

文章目录 前言背景操作指南安装及配置步骤vue组件中使用 参考文章 前言 博主介绍&#xff1a;✌目前全网粉丝3W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域。 涵盖技术内容&#xff1a;Java后端、大数据…
阅读更多...
php获取远程https内容时提示 PHP Warning: copy(): Unable to find the wrapper “https“ 解决方法

php获取远程https内容时提示 PHP Warning: copy(): Unable to find the wrapper “https“ 解决方法

异常信息&#xff1a; php -r "copy(https://getcomposer.org/installer, composer-setup.php);" PHP Warning: copy(): Unable to find the wrapper "https" - did you forget to enable it when you configured PHP? in Command line code on line 1 P…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023