将现有web项目打包成electron桌面端教程

2024-06-05 10:44

本文主要是介绍将现有web项目打包成electron桌面端教程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

后续项目需要web端和桌面端,为了提高开发效率,准备直接将web端的代码打包成桌面端,在此提前记录一下demo打包的过程,我的项目是vue3+ts+vite,需要注意的是vue2或者vue3+js+vite或者vue-cli的打包方式各不同,如果你的项目不是vue3+ts+vite,就不用再往下看了哈,再找找别的教程~

一、准备

1.demo项目准备

先提前准备好一个现有的web端项目,我随便拿了一个之前做过的项目来做demo

2.安装electron依赖 
npm install electron 

3.修改vite.config.ts文件

主要是修改配置文件路径

4.在根目录添加main.js文件

这是electron运行的入口文件

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')function createWindow () {// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.htmlmainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同,需要注意// 打开开发工具// mainWindow.webContents.openDevTools()
}// 这段程序将会在 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()
})// 在这个文件中,你可以包含应用程序剩余的所有部分的代码,
// 也可以拆分成几个文件,然后用 require 导入。
5.在根目录添加preload.js文件
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
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])}
})
6.修改package.json文件

新增两处如下:

到这里准备工作已经完成了 

二、正式开始打包 

1.打包web项目
npm run build
2.运行electron

看看是否可以正常运行

npm run electron:serve

很显然登录页是正常显示的,但是点击登录,登陆成功了,但是跳转首页出现白屏...

(此问题待解决...)

​  

3.热更新开发环境
3.1修改main.js文件

3.2开启vite和electron服务

注意:要先运行vite,让开发服务器的url 可以正常访问,才能再开启electron加载url

这需要安装两个依赖:

  • concurrently:阻塞运行多个命令,-k参数用来清除其它已经存在或者挂掉的进程
  • wait-on:等待资源,此处用来等待url可访问

npm有可能不成功,可以自己换cnpm pnpm yarn...

cnpm install -D concurrently wait-on 
3.3 修改package.json文件

两条命令添加完成

  • yarn electron为等待tcp协议5173端口可访问,然后执行electron
  • yarn electron:serve为阻塞执行开发服务器运行和yarn electron命令

运行项目只要执行命令yarn electron:serve或者npm run electron:serve即可,当修改项目文件时,桌面应用也将自动更新。

3.4运行出现bug

electron: Failed to load URL: file:///D:/lijinxin/electron-study/perioperative-web/http:/localhost:8889 with error: ERR_FILE_NOT_FOUND   

(依旧待解决...)

4. 开始打包
4.1 创建electron文件

将main.js和preload.js文件移进来

4.2修改electron/main.js文件
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')const NODE_ENV = process.env.NODE_ENV  //新增
// const NODE_ENV = 'development'  // 判断开发或生产模式(建议写成这种,开发模式就可以用,等即将打包了再把这个变量换成打包模式)function createWindow () {// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.html// mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同,需要注意mainWindow.loadURL(NODE_ENV === 'development'? 'http://localhost:8889':`file://${path.join(__dirname, '../dist/index.html')}`); // 新增// 打开开发工具if (NODE_ENV === "development") {mainWindow.webContents.openDevTools()} // 新增
}// 这段程序将会在 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()
})// 在这个文件中,你可以包含应用程序剩余的所有部分的代码,
// 也可以拆分成几个文件,然后用 require 导入。
 4.3修改package.json文件
  • 将main: main.js改为main: electron/main.js
  • 添加build属性:
 "build": {"appId": "com.dweb.demo",  //包id com.dweb.项目名"productName": "ElectronApp", // 项目名"copyright": "Copyright © 2021 <your-name>", // 版权信息"mac": {"category": "public.app-category.utilities"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets", //静态文件资源获取目录"output": "dist_electron" // 打包位置,会新建到项目根目录}},
  • 修改scripts属性

先下载两个依赖:

npm install -D cross-env electron-builder
{"dev": "vite","build": "vite build","serve": "vite preview","electron": "wait-on tcp:8889 && cross-env NODE_ENV=development electron .", "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"","electron:build": "vite build && electron-builder" 
}

修改后的内容如下:

 

4.4 执行打包命令
npm run electron:build

出现这个报错别慌:

Package “electron” is only allowed in “devDependencies”. Please remove it from the “dependencies” section in your package.json.

把dependencies中的electron删掉就可以了

  

如果下载依赖失败,可以参考这篇:

解决electron-builder打包时下载依赖慢的问题 | 梓喵出没 (azimiao.com)

4.5打包完成

打包完成后,会生成dist和dist_electron,双击dist_electron中的exe文件,按照导引进行安装就可以运行啦

 

   

留个Bug给自己,这里打包成应用后,依然点击登录跳转首页是白屏,还不知道怎么处理... (有时间再继续看看怎么解决)

这篇关于将现有web项目打包成electron桌面端教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.

SpringBoot连接Redis集群教程

《SpringBoot连接Redis集群教程》:本文主要介绍SpringBoot连接Redis集群教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 依赖2. 修改配置文件3. 创建RedisClusterConfig4. 测试总结1. 依赖 <de