在原有的vue(react)项目中引入electron打包成桌面应用(全网最新!)

本文主要是介绍在原有的vue(react)项目中引入electron打包成桌面应用(全网最新!),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

基于原有的项目中使用electron打包成桌面应用

首先了解electron是什么?

软件简介

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium,被 Atom 编辑器和许多其他应用程序使用。

Electron 兼容 Mac、Windows 和 Linux,可以构建出三个平台的应用程序。

在这里插入图片描述

进入主题:

  1. vue添加electron包(使用npm命名全局安装)
  npm install electron -g
  1. Vue项目添加Electron-builder打包工具
  vue add electron-builder

注意: 如果出现electron安装失败,或者后面使用electron-builder打包时,出现从github down包失败,请设置electron镜像。

设置镜像方法:

npm config edit

解释:使用该命令会弹出npm的配置文档,将以下类容复制到文件末尾。

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

在这里插入图片描述

  1. 在项目根目录加入background.js(自己命名即可),然后写入以下代码:
"use strict";import { app, protocol, BrowserWindow, Menu } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{ scheme: "app", privileges: { secure: true, standard: true } },
]);async function createWindow() {// Create the browser window.const win = new BrowserWindow({width: 1260,height: 800,// frame: false, // 如果需要去除窗口边框webPreferences: {// Use pluginOptions.nodeIntegration, leave this alone// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more infonodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, // 在向导页面中使用 Node.js 模块contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,},});if (process.env.WEBPACK_DEV_SERVER_URL) {// Load the url of the dev server if in development modeawait win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);if (!process.env.IS_TEST) win.webContents.openDevTools();} else {createProtocol("app");// Load the index.html when not in developmentwin.loadURL("app://./index.html");}
}// 隐藏客户端默认菜单
Menu.setApplicationMenu(null);// Quit when all windows are closed.
app.on("window-all-closed", () => {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== "darwin") {app.quit();}
});app.on("activate", () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow();
});// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", async () => {if (isDevelopment && !process.env.IS_TEST) {// Install Vue Devtoolstry {await installExtension(VUEJS_DEVTOOLS);} catch (e) {console.error("Vue Devtools failed to install:", e.toString());}}createWindow();
});// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {if (process.platform === "win32") {process.on("message", (data) => {if (data === "graceful-exit") {app.quit();}});} else {process.on("SIGTERM", () => {app.quit();});}
}
  1. 在package.json文件里面加入
"main": "background.js",

在这里插入图片描述

运行测试:

npm run serve--网页
npm run electron:serve--客户端

在这里插入图片描述

项目打包:

npm run electron:build

注意:如果打包报错!!!
Node.js v19.x.x 版本时可能会遇到Error: error:0308010C:digital envelope routines::unsupported
原因:使用的 OpenSSL 版本不受支持导致的

解决方法:
检查自己node版本 尽量使用v16版本的!!

其他可能出现问题解决办法:
在这里插入图片描述

打开 node_module/app-builder-lib/out/targets/nsis/NsisTarget.js文件,在 executeMakensis 方法中加入我们所需的参数

{
args.push("-INPUTCHARSET", "UTF8");
}

附加1 替换客户端图标及配置安装程序

进入项目路径,查看是否存在vue.config.js同名文件(好像是vue3没有,vue2会有),没有则创建一个空文件。加入以下代码:

module.exports = {pluginOptions: {electronBuilder: {customFileProtocol: "/",  //解决element图标问题(起因:因为打包,element-ui的样式没有当做静态资源引用)builderOptions: {"appId": "com.tomatoLRX.app","productName": "SPTSystem",//项目名,也是生成的安装文件名,即aDemo.exe"copyright": "Copyright © 2023",//版权信息"directories": {"output": "./dist"//输出文件路径,之前编译的默认是dist_electron},win: {icon: "vueApp.ico", //这里注意配好图标路径target: [{target: "nsis", //利用nsis制作安装程序,打包文件的后缀为exearch: ["x64", //64位"ia32", //32位],},], //添加自定义安装向导},nsis: {oneClick: false, //创建一键式安装程序还是辅助安装程序language: "2052", //安装语言perMachine: true, //应用所有用户allowToChangeInstallationDirectory: true, //用户可以选择路径},// options placed here will be merged with default configuration and passed to electron-builder}}}
}

更多配置可参考electron-builder的配置:

"build": {"productName":"xxxx",		//项目名 这也是生成的exe文件的前缀名"appId": "com.xxx.xxxxx",	//包名  "copyright":"xxxx",			//版权信息"directories": { 			//输出文件夹"output": "build"}, "nsis": {	//nsis相关配置,打包方式为nsis时生效"oneClick": false, 								// 是否一键安装"allowElevation": true, 							// 允许请求提升,如果为false,则用户必须使用提升的权限重新启动安装程序。"allowToChangeInstallationDirectory": true, 		// 允许修改安装目录"installerIcon": "./build/icons/aaa.ico",			// 安装图标"uninstallerIcon": "./build/icons/bbb.ico",		//卸载图标"installerHeaderIcon": "./build/icons/aaa.ico", 	// 安装时头部图标"createDesktopShortcut": true, 					// 创建桌面图标"createStartMenuShortcut": true,					// 创建开始菜单图标"shortcutName": "xxxx", 							// 图标名称"include": "build/script/installer.nsh", 			// 包含的自定义nsis脚本},"publish": [{"provider": "generic", 		// 服务器提供商,也可以是GitHub等等"url": "http://xxxxx/" 		// 服务器地址}],"win": {"icon": "build/icons/aims.ico","target": [{"target": "nsis",			//使用nsis打成安装包,"portable"打包成免安装版"arch": ["ia32",				//32位"x64" 				//64位]}]},"mac": {"icon": "build/icons/icon.icns"},"linux": {"icon": "build/icons"}}

附加2 隐藏客户端默认菜单

程序的main是background.js,找到它打开编辑
在这里插入图片描述

里面是electron代码,直接修改,添加Menu引用,然后设置程序菜单为null,运行发现菜单已经没有了,重新打包即可。

import {  Menu } from "electron";
// 隐藏客户端默认菜单
Menu.setApplicationMenu(null);

这篇关于在原有的vue(react)项目中引入electron打包成桌面应用(全网最新!)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/751611

相关文章

linux打包解压命令方式

《linux打包解压命令方式》文章介绍了Linux系统中常用的打包和解压命令,包括tar和zip,使用tar命令可以创建和解压tar格式的归档文件,使用zip命令可以创建和解压zip格式的压缩文件,每... 目录Lijavascriptnux 打包和解压命令打包命令解压命令总结linux 打包和解压命令打

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②

SpringBoot项目注入 traceId 追踪整个请求的日志链路(过程详解)

《SpringBoot项目注入traceId追踪整个请求的日志链路(过程详解)》本文介绍了如何在单体SpringBoot项目中通过手动实现过滤器或拦截器来注入traceId,以追踪整个请求的日志链... SpringBoot项目注入 traceId 来追踪整个请求的日志链路,有了 traceId, 我们在排

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

MobaXterm远程登录工具功能与应用小结

《MobaXterm远程登录工具功能与应用小结》MobaXterm是一款功能强大的远程终端软件,主要支持SSH登录,拥有多种远程协议,实现跨平台访问,它包括多会话管理、本地命令行执行、图形化界面集成和... 目录1. 远程终端软件概述1.1 远程终端软件的定义与用途1.2 远程终端软件的关键特性2. 支持的

Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)

《Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)》本文介绍了如何使用Python和Selenium结合ddddocr库实现图片验证码的识别和点击功能,感兴趣的朋友一起看... 目录1.获取图片2.目标识别3.背景坐标识别3.1 ddddocr3.2 打码平台4.坐标点击5.图