react+electron+antd+electron-builder桌面应用总结

最新推荐文章于 2024-04-30 21:38:13 发布
置顶 最新推荐文章于 2024-04-30 21:38:13 发布
阅读量2.3k 收藏 4
点赞数 1
分类专栏： web前端 文章标签： react electron electron-builder antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40593656/article/details/100101911
版权

前期的项目搭建参考下方博文
https://blog.csdn.net/zoepriselife316/article/details/88034109
写的十分详细

本文主要针对搭建后的项目打包问题 进行总结
第一次接触 遇到了许多问题！

一、打包报 Application entry file “build\electron.js” in the “D:\workspace\electronDemo\demo-test\demo\dist\win-unpacked\resources\app.asar” does not exist
在这里插入图片描述
报错 说在build文件夹下找不到electron.js
解决方案：将根目录的mian.js粘贴到build里，并改名为electron.js
这是electron-builder特有的要求
在这里插入图片描述
在这里插入图片描述

二、打包后找不到path
在这里插入图片描述
原因是m

最低0.47元/天 解锁文章
cvory
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
electron-antd:使用Electron + Typescript + React + Antd创建一个桌面应用程序
04-29
快速开始安装yarn# ornpm install 开始开发npm run dev概述网页包电子电子生成器电子对数ReactReact路由器还原蚂蚁设计混音较少的打字稿埃斯林特更漂亮开发工具切换DevTools： OSX： Cmd Alt I或F12 Linux： Ctrl ...
Application entry file “background.ts“ in the “**dist_electron\win-unpacked\resources\app.asar“ does
东扯葫芦西扯瓜——前端小菜鸟的博客
07-10 2573
vue-cli3 + electron 打包报错：Error: Application entry file "background.ts" in the "**\dist_electron\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.
Application entry file “background.ts“ in the “D:\Work\OT2023\ot-call-ui\dist_electron\win-unpacked
xiaomomo19的博客
09-27 295
问题：vue-cli3 + electron +ts 打包报错：Error: Application entry file “background.ts” in the “**\dist_electron\win-unpacked\resources\app.asar” does not exist. Seems like a wrong configuration.把main入口：改成background.js。
Electron开发 umi react 应用
最新发布
hawk2014bj的博客
04-30 924
Electron 是一个跨平台桌面端的应用框架，electron 底层依赖3 个核心组件 Chromium、Node.js、Electron API，Chromium 是 Chrome 的开源版本，Node.js可以编写后台应用程序，集成 Node.js 到 Electron，使得 Electron 可以使用 Node.js 提供的功能，例如访问本地文件和数据库。
electron 中遇到的报错
qq_42014441的博客
07-22 5677
1. Uncaught(inpromise)Error:Failedtoopen 。 系统默认浏览器被删除 let shell = window.require("electron").shell; shell.openExternal(url);
Application entry file “background.ts” in the “app.asar” does not exist.
coderflyer
12-10 4182
Electron app研发踩坑之旅~Application entry file “background.ts” in the “app.asar” does not exist.
ruoyi-vue 集成electron详细步骤
yueping0718的专栏
12-15 2722
刚使用ruoyi-vue开始集成electron的可以直接去这个地址下载源码
electron-react-antd-antv-cli:一个集成electron、react、antd、antv的开发脚手架，便于快速搭建基于react开发的electron桌面应用
05-12
electron-react-antd-antv-cli一个集成electron、react、antd、antv的开发脚手架，便于快速搭建基于react开发的electron桌面应用EdeverClient可视化客户端便于更好的获取脚手架更新动态, 基于electron-react-antd-...
electron开发桌面程序windows+mac操作系统安装，集成前端react+ant design UI
11-03
3. 实现热更新：使用像`webpack`这样的模块打包工具，结合`electron-builder`或`electron-reload`实现应用的热更新和打包。 七、从`realize-frontend-pc-master`文件中学习 这个文件名可能是某个项目或者示例代码的...
nuaa-sql-bigwork-frontend::file_cabinet:NUAA 2018 数据库实验 - 学生管理系统 - 前端 - 基于 React + Antd + Electron
05-09
该项目分为前后端两部分，你看到的这部分为前端，即页面部分，此外，该项目还提供了基于Electron的桌面版应用。项目用到的技术栈为nodejs + react+ antd + electron 前端环境配置 在使用之前，你需要安装nodejs，...
linux项目工程资料-基于react+ts+antd+webpack5+electron开发的客户端后台管理系统.zip
02-29
该项目以Linux内核为核心，围绕其构建了一个完整的操作系统，包括各种系统工具、库、应用程序和硬件支持。 以下是Linux项目的一些主要特点和资料介绍： 开放源代码：Linux项目的所有源代码都是公开的，并允许任何...
vue-cli3 + electron 打包报错：Error: Application entry file “background.ts“ in the “\*\*\\dist\_electron\
baidu_33164415的博客
12-27 1236
vue-cli3 + electron 打包报错：Error: Application entry file "background.ts" in the "\*\*\\dist\_electron\\w...
electron-builder打包失败Application entry file “build/electron.js“
weixin_42826294的博客
02-03 7125
⨯ Application entry file "build/electron.js" in the "/Users/qiandingwei/Documents/projects/cloud-doc/dist/mac/七牛云文档.app/Contents/Resources/app.asar" does not exist. Seems like a wrong configuration. stackTrace= 官网文档如图所示： 在使用react-cra时会把入口（main.js）给改了。 解
electron 打包的踩坑之旅
人生代码 ---- 公众号
08-15 1913
本项目使用的是这个模板：https://github.com/nuochong/ant-design-pro-vue-electron 打包的时候碰到类似这样的问题： Error: Application entry file “index.js” in the “/data/projects/iermu_pc_app/dist/win-unpacked/resources/app.asar” does not exist. Seems like a wrong configuration. 解决如下： E
electron-builder打包失败，提示Application ... app.asar does not exist
qq_32660241的博客
05-12 3007
Error: Application entry file “dist\electron\main.js” in the “D:\electronWork\electron-egg\build\win-unpacked\resources\app.asar” does not exist
electron 升级 v22 遇到问题
哼哼哼哼哼
10-10 886
由于 23以上不在支持win 7 8 8.1。node-sass 的版本太高需要降级。所以我选择安装 v22.3.24。以下是我开发中遇到的问题。Electron 漏洞。
React项目使用electron-builder打包
Wen1129511的博客
12-09 2620
创建项目 有一个可运行的react项目 create-react-app electronbuilderdemo 执行npm start 出现以下页面就是运行成功 设置淘宝镜像 打包过程中会下载插件安装，如果没有设置镜像，直接从gihub下载，几乎会卡死 执行命令 npm config edit 将以下代码复制进文件中 electron_mirror=https://npm.taobao.org/mirrors/electron/
使用create-react-app创建Electron应用
u010769267的博客
12-26 1123
参考文章：⚡️ From React to an Electron app ready for production，原文较为久远了，所以本文对部分代码进行了修改 使用React构建Electron应用时，官网推荐使用electron-react-boilerplate 。但是这个项目有些重，于是想使用比较熟悉的create-react-app进行构建，记录一下踩坑过程。 初始化create-react-app项目 个人比较喜欢TypeScript，所以使用create-react-app的TypeSc.
electron + react 开发软件遇到的问题与解决方法（更新于2024.03.01）
qq_36361032的博客
08-21 697
官网使用的electron-forge能满足正常的打包，但是如果有需求是某些文件夹或配置文件不想打包进.asar里，就需要使用electron-packager。使用widow.localStorage存储数据只能在软件未关闭前能拿到。一旦软件关闭再重新启动，那么缓存的数据将会被清除掉。使用上面的插件，能有效解决。3、main.js文件的基础配置。
react + electron electron-builder 打包教程
05-28
好的，下面是基于 React 和 Electron 并使用 electron-builder 进行打包的教程： 1. 创建 React 应用 首先，我们需要使用 create-react-app 工具创建一个 React 应用。在命令行中运行以下命令： ``` npx create-react-app my-electron-app ``` 这会在当前目录下创建一个名为 `my-electron-app` 的新应用。 2. 添加 Electron 接下来，我们需要在项目中添加 Electron。我们可以使用 `electron` 和 `electron-builder` 库来实现这一点。 在命令行中运行以下命令： ``` cd my-electron-app npm install --save-dev electron electron-builder ``` 3. 添加 Electron 入口文件 我们需要创建一个新文件 `public/electron.js`，这是 Electron 的入口文件。在这个文件中，我们需要引入 `electron` 模块并创建一个新的 Electron 窗口。 ```js const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadURL('http://localhost:3000') } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` 这个文件创建了一个新的 Electron 窗口，并在窗口中加载了 React 应用的 `http://localhost:3000` 页面。 4. 修改 package.json 文件 我们需要修改 `package.json` 文件中的一些字段，以便 electron-builder 能够正确地打包我们的应用。 ```json { "name": "my-electron-app", "version": "0.1.0", "homepage": "./", "main": "public/electron.js", "build": { "appId": "com.example.my-electron-app", "productName": "My Electron App", "directories": { "output": "build" }, "files": [ "build/**/*", "node_modules/**/*", "public/**/*" ], "mac": { "category": "public.app-category.developer-tools", "icon": "public/icon.icns" }, "win": { "icon": "public/icon.ico" } } } ``` 这个文件中的 `main` 字段告诉 electron-builder 我们的 Electron 入口文件在 `public/electron.js`。`build` 字段中的其他字段指定了打包的一些设置，例如应用的 ID、名称、输出目录、文件列表和图标。 5. 添加打包脚本 最后，我们需要在 `package.json` 文件中添加一个打包脚本。 ```json { "scripts": { "start": "react-scripts start", "build": "react-scripts build", "pack": "electron-builder --dir", "dist": "electron-builder" } } ``` 这些脚本中的 `pack` 脚本会在开发模式下打包应用程序，而 `dist` 脚本会在生产模式下打包应用程序。 6. 运行应用 现在，我们可以运行应用程序。在命令行中运行以下命令： ``` npm start ``` 这将启动 React 应用程序。 然后，在另一个命令行窗口中运行以下命令： ``` npm run pack ``` 这将使用 `electron-builder` 打包应用程序，并在输出目录中生成一个可执行文件。 如果您想要构建一个安装程序，您可以运行以下命令： ``` npm run dist ``` 这将打包应用程序，并在输出目录中生成一个安装程序。 这就是使用 React 和 Electron 并使用 electron-builder 进行打包的教程。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值