iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于electron打包的坑
  • 414
分享到

关于electron打包的坑

electron打包electron打包报错 2023-03-01 11:03:10 414人浏览 泡泡鱼
摘要

首先electron打包的方式有两种 通过electron-builder通过electron-package 两种方式,electron-builder打包的话扩展性更强,包也较小

首先electron打包的方式有两种

  • 通过electron-builder
  • 通过electron-package

两种方式,electron-builder打包的话扩展性更强,包也较小,electron-package打出来的包相对扩展性更小,且包容量较大,一般都会选择electron-builder进行打包。

注意electron和electron-build版本的问题

1.两者配套使用,如果两者的包不是配套的,版本不适配那么就会导致打包失败,因此我们使用electron-builder打包的时候一定要注意版本的匹配。
2.其次也要注意我们源码所在文件的位置,路径包括文件名一定不要出现中文,否则也会导致失败。
3.网络问题也是比较坑的点,最好是能用手段让网络通畅,尽量使用yarn , npm去安装依赖包。虽然cnpm也是可以的,但是cnpm和npm yarn还是有区别的,他们载入的包结构是不同的,因此还是建议使用yarn add。 官方也是推荐yarn
4.网络不通畅的情况下,我们下载electron 和 electron-builder就比较费劲。我这里也是通过根目录创建.npmrc文件配置镜像来操作
5.electron和 electron-builder属于开发时依赖项,特别是electron-builder一定要安在devDependencies下

package.JSON文件

{
  "name": "music-React",
  "version": "0.1.0",
  "private": true,
  "description": "create-react-app electron electron-builder dotcoo test",
  "author": "YJ",
  "main": "public/electron.js",
  "homepage": ".",
  "dependencies": {
    "@ant-design/icons": "^4.2.2",
    "@craco/craco": "^5.7.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.7.0",
    "axiOS": "^0.20.0",
    "immer": "^7.0.14",
    "nORMalize.CSS": "^8.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "react-router-config": "^5.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "styled-components": "^5.2.0"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "electron": "cross-env node_ENV=development electron .",
    "pack": "cross-env NODE_ENV=production yarn run build && electron-builder --dir",
    "dist": "cross-env NODE_ENV=production yarn run build && electron-builder"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "cross-env": "^7.0.2",
    "electron": "^7.0.0",
    "electron-builder": "^22.4.0"
  }
}

.npmrc文件

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=Http://npm.taobao.org/mirrors/electron-builder-binaries/

electron主进程文件

// 引入模块
const url = require('url');
const path = require('path');
const { app, BrowserWindow } = require('electron');

// 开发环境
const isDev = process.env.NODE_ENV === 'development';

// 保持对window对象的全局引用,如果不这么做的话,当javascript对象被
// 垃圾回收的时候,window对象将会自动的关闭
let win = null;

function createWindow () {
  // 创建浏览器窗口。
  win = new BrowserWindow({
    width: 800,
    height: 600,
    WEBPreferences: {
      // 使用 preload 预加载模块, 可以把 nodeIntegration 禁用掉, 在 preload 阶段是可以访问 node 的,
      // 这样做是因为即使启用了 node, webpack 在进行打包的时候也不会识别 node 模块和 electron 模块,
      // nodeIntegration: true,
      // 使用 proload 预加载注入的模块, 参看下方的 preload.js 文件
      preload: path.join(__dirname, './preload.js'),
    },
  });

  // 删除菜单
  // win.removeMenu();

  // 加载index.html文件
  win.loadURL(isDev ? 'http://localhost:3000' : url.format({
    protocol: 'file',
    slashes: true,
    pathname: path.join(__dirname, 'index.html'),
  }));

  // 打开开发者工具
  isDev && win.webContents.openDevTools();

  // 当 window 被关闭,这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象,如果你的应用支持多窗口的话,
    // 通常会把多个 window 对象存放在一个数组里面,
    // 与此同时,你应该删除相应的元素。
    win = null;
  });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 api 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 MacOS 上,除非用户用 Cmd + Q 确定地退出,
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在macOS上,当单击dock图标并且没有其他窗口打开时,
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow();
  }
});

// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。

preload.js文件

// 这里是预加载文件, 即使不开启 nodeIntegration 也可以使用 node 模块,
// 我们将需要的模块, 添加到 window 上, 然后再页面中可以从 window 对象上取到需要的模块.
window.electron = require('electron');
window.fs = require('fs');
window.express = require('express');

这是基本打包的步骤 此处我打包的项目是react项目 Vue的话也有共通之处,最主要还是要避开版本不配套和网路不通畅的坑

到此这篇关于关于electron打包的坑的文章就介绍到这了,更多相关electron打包内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 关于electron打包的坑

本文链接: https://www.lsjlt.com/news/197986.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 关于electron打包的坑
    首先electron打包的方式有两种 通过electron-builder通过electron-package 两种方式,electron-builder打包的话扩展性更强,包也较小...
    99+
    2023-03-01
    electron打包 electron打包报错
  • electron打包的坑如何解决
    这篇文章主要介绍“electron打包的坑如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“electron打包的坑如何解决”文章能帮助大家解决问题。两种方式,electron-builder打...
    99+
    2023-07-05
  • electron打包中的坑如何解决
    这篇文章主要讲解了“electron打包中的坑如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“electron打包中的坑如何解决”吧!问题一:css文件中图片加载失败问题描述问题是这样...
    99+
    2023-07-05
  • electron打包中的巨坑解决记录
    目录吐槽问题一:css文件中图片加载失败问题描述解决过程补充问题二:无法使用cookie问题描述原因分析总结吐槽 从上周五到今天,我被electron打包折磨得死去活来,本来想让...
    99+
    2023-03-01
    electron打包坑解决 electron 打包
  • 关于electron-vue打包后运行白屏的解决方案
    目录electron-vue打包后运行白屏的解决electron-vue打包之后只有空白页问题原因electron-vue打包后运行白屏的解决 找到.electron-vue文件夹中...
    99+
    2022-11-13
    electron-vue打包 electron-vue打包运行白屏 electron-vue运行白屏
  • 关于Pyinstaller打包eel和pygame需要注意的坑
    这几天我们团队用python做了一个游戏,引擎用的pygame,UI界面用的eel(一个python库,用于利用HTML开发桌面应用程序,主要是因为QT机制太过复杂,而博主Deadp...
    99+
    2024-04-02
  • electron-builder打包的示例分析
    这篇文章主要介绍了electron-builder打包的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。开发electron客户端程序...
    99+
    2024-04-02
  • 【Electron Forge】基于Electron打包成Windows、MacOs、linux多个平台跨平台安装包的方法总结
    参考: 打包您的应用程序 | Electron Makers - Electron Forge forge.config.js的配置  module.exports = { packagerConfig: {}, rebuil...
    99+
    2023-09-07
    linux electron windows
  • 关于python的calendar包打印
    背景 最近又开始捡起之前看得python,calendar这个之前没有看到这,今早看到了,想进一步学习一下。 我的python版本3.4.3. 场景1: 没有什么特殊需求,直接输出日历。代码如下: # -*- encoding = ut...
    99+
    2023-01-31
    python calendar
  • electron-builder打包配置详解
    目录1.基础配置2.打包目标配置3.其他平台配置4.nsis配置5.关于操作系统的配置6.更新配置这里介绍的是直接在package.json中直接配置使用: 1.基础配置 "buil...
    99+
    2024-04-02
  • vite + electron-builder 打包配置详解
    目录创一个vite项目安装打包工具配置桌面环境创建 主进程 main.js添加electron 运行命令打包项目,生成dist解决资源无法加载开发环境:热更新两个工具 concurr...
    99+
    2024-04-02
  • electron如何打包vue项目
    这篇文章主要介绍electron如何打包vue项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!创建项目添加electron-builder在项目目录下运行命令:vue add electron-builder2、e...
    99+
    2023-06-29
  • electron打包vue项目的方法步骤
    目录创建项目添加electron-builderelectron下载失败窗体运行打包exe白屏创建项目 点击这里 添加electron-builder 1、在项目目录下运行命令:vu...
    99+
    2024-04-02
  • Electron+React应用打包全流程
    目录1. 打包工具的选择2. 生成静态文件3. Electron 入口文件配置4. electron-builder 配置5. 准备打包文件6. 打包过程(第一次用 Typora 写...
    99+
    2023-01-16
    Electron React应用打包 Electron React 打包
  • electron-builder该怎么打包配置
    electron-builder该怎么打包配置,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。小编介绍的是直接在package.json中直接配置使用:1.基础配置"...
    99+
    2023-06-28
  • 关于SpingMVC的<context:component-scan>包扫描踩坑记录
    目录<context:component-scan>包扫描的坑改动前改动后<context:component-scan>的使用说明<context:a...
    99+
    2024-04-02
  • 关于TypeScript的踩坑记录
    目录用字符串做下标报错函数内使用this报错找不到模块XXX引入模块提示找不到声明文件(接上一个问题)JSON直接解析localStorage值报错初始加载的组件未命名,浏览器打开页...
    99+
    2024-04-02
  • 关于C++的坑有哪些
    这篇文章主要讲解了“关于C++的坑有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“关于C++的坑有哪些”吧!1. string的字符串拼接,导致coredump该问题的核心点在于第9行,...
    99+
    2023-06-16
  • 详谈Java中net.sf.json包关于JSON与对象互转的坑
    在Web开发过程中离不开数据的交互,这就需要规定交互数据的相关格式,以便数据在客户端与服务器之间进行传递。数据的格式通常有2种:1、xml;2、JSON。通常来说都是使用JSON来传递数据。本文正是介绍在Java中JSON与对象之间互相转换...
    99+
    2023-05-30
    java net.sf.json json
  • 关于maven打包出错的解决方案
    目录maven打包出错的解决解决版本有两种1、修改项目使用的java版本2、修改maven中的版本总结maven打包出错的解决 今天在使用maven打包时出现错误,因此记录一下。。 ...
    99+
    2023-05-16
    maven打包出错 maven打包 maven打包出错解决
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作