Electron+React项目打包踩坑记录

这篇具有很好参考价值的文章主要介绍了Electron+React项目打包踩坑记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先,如何打包

写下本文的时间是 2024/01/16,搜索了网络上 Electron+React 的打包方式,中间行不通,本文采用的方式是记录本文时 Electron 快速入门(https://www.electronjs.org/zh/docs/latest/tutorial/quick-start)记录的打包方式,最主要的区别在于把 html 文件换成 React 项目打包后 build 文件夹里面的 html 文件了,如下图
Electron+React项目打包踩坑记录,electron文章来源地址https://www.toymoban.com/news/detail-809549.html

踩坑记录

  • 打包前把 package.json 里面的字段补全,否则会报错,直接把下面这段复制粘贴进文件即可
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}
  • 执行 npx electron-forge import 时魔法需要开全局模式
  • npm run make 时不能开魔法
  • build/index.html 里面的路径需要加上 .,比如 href 属性里的路径,react 打包后默认是不带 . 的,需要自己加上
    Electron+React项目打包踩坑记录,electron

到了这里,关于Electron+React项目打包踩坑记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 将vue项目通过electron打包成windows可执行程序

    1、准备好dist将整个项目打包 2、安装electron依赖 在dist文件夹下面创建electron.js electron.js内容如下: 在dist文件夹下面添加package.json文件内容如下: 整个文件夹格式如下: 在跟目录添加命令 执行打包命令 等待打包结果,打包出来为一下截图即为打包成功,双击china_new1.exe运行

    2024年02月12日
    浏览(35)
  • vite+ vue3(现有项目或者新项目)+electron打包教程,以及electron代码热重载页面(保姆级教程),一文带你走完全过程

      1.删掉type这个字段,不然会报错  2.然后加上\\\"main\\\": \\\"electron/main.js\\\",  3.在scripts字段中加入启动electron的命令:如下图 5.这时候你去打开控制台输入输入npm run start会得到一片空白,展示如下页面 1.因为现在监听的是vue打包后的dist文件夹中的index.html 2.我就不教你们怎么打开那个

    2024年02月11日
    浏览(121)
  • electron项目打包之后显示空白页面以及发送http请求地址错误

            electron项目在开发阶段,因为使用webpack脚手架,启用了webServer提供的http服务,所以有路由功能,当我们运行npm run electron:serve的时候,最后可以直接加载http://localhost:8080。在app里面就可以显示页面。     当electron项目打包之后,成为桌面程序,这个时候就没有http服务支

    2024年02月13日
    浏览(37)
  • web前端项目使用electron打包成跨平台桌面端程序(Windows)

    Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 在使用Electron进行开发之前,您需要安装 Node.js。 我们建

    2024年02月16日
    浏览(83)
  • Electron-builder打包vue项目后,背景图片不加载的问题

    打包后的项目启动之后,背景图片没有成功加载,只有一片空白。此时打开调试工具可以看到,electron自动把图片路径加上了/img/  我们这时打开打包后的dist_electron文件夹,打开bundledimg目录,  这就是上面报错的路径。 对于背景图片,不要使用如下 background:url(\\\'..\\\') 的形式,这样写

    2024年02月09日
    浏览(45)
  • electron+vue3全家桶+vite项目搭建【24】设置应用图标,打包文件的图标

    demo项目地址 在electron中,我们可以通过electron-builder的配置文件来设置打包后的应用图标 因为mac环境下的图标需要特殊格式,这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖 加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载,可以直接去github上下载 这里我也放一

    2024年02月17日
    浏览(64)
  • 【electron 4】electron配置打包环境

    window需要:ico mac需要:icns linux需要png 借助:electron-icon-builder 安装: 配置package.json scripts 说明: input:icon.png是我需要引入的图标 output:是我将input引入图标所转换不同大小不同格式的图标输出文件 因为我是已有的项目了,所以这里我只需要安装并引入electron-forge,虽然我进

    2024年04月28日
    浏览(37)
  • Electron-React18-MacOS桌面管理系统|electron27+react仿mac桌面

    基于 React18+Electron27+ArcoDesign 仿macOS桌面端系统框架 ElectronMacOS 。 electron-react-macOs 基于 electron27.x+vite4+react18+arcoDesign+zustand 等技术构建桌面版仿MacOs框架系统解决方案。支持 中英文/繁体、dark+light主题、桌面多层级路由、多窗口路由页面、动态换肤、Dock悬浮菜单 等功能。 Elec

    2024年02月05日
    浏览(34)
  • 【Electron】使用electron-builder打包时下载electron失败或慢的解决方案

    问题描述 electron-builder打包时报错信息如下: 解决 该问题是因为electron包需要翻墙获得,需要全局代理,但是太麻烦,我们一般是修改镜像源 在项目根目录下创建.npmrc文件,并且输入以下配置:

    2024年02月11日
    浏览(43)
  • electron27+react18集成搭建跨平台应用|electron窗口多开

    electron27-vite4-react18基于electron27结合vite4构建工具快速创建react18跨端应用实践。 版本列表 快速创建react18项目 这里选择使用vite.js构建工具来快速创建一个react18项目。 这样一个简单的react18项目就已经创建完毕了。 安装electron依赖包 注意:electron依赖安装在 devDependencies 里面。

    2024年02月08日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包