SinF的Electron系列之三---electron-packager加载第三方资源

hikui 发布于2019-08-23 14:26 / 562人阅读

摘要：在上篇的系列之二里我提到了，用字段来加载第三方资源。在项目开始的时候，我把第三方资源放到了根目录的文件夹里，发现并没有起到加载第三方资源的效果。通用查询，发现提供字段。

在上篇SinF的Electron系列之二里我提到了，用--extra-resource字段来加载第三方资源。

在项目开始的时候，我把第三方资源放到了根目录的static文件夹里，发现并没有起到加载第三方资源的效果。通用查询，发现electron-packager提供--extra-resource字段。

核心方法，用 --extra-resource 字段来存储。用 path 模块来获取绝对路径。

核心路径，Resources文件夹

具体使用方法，

存储代码如下：

     --extra-resource=./res/2.dat --extra-resource=./res/1.dat

【注意】./res 是我在根目录下面自定义的一个第三方资源目录，可以任意修改。如果有多个第三方资源，可以重复添加。

难点在于如何读取，我以mac版本的打包文件为例

    Contents
        │   ├── Framworks (electron框架文件)
        │   ├── MacOS
        │   │   ├── 项目
        │   └── Resources（资源）
        │   │   └── electron.asar(打包后的执行文件,asar格式即加密格式，只能通过node.js的fs模块解析)
        │   │   └── ...(其他资源)
        │   │   └── 1.dat
        │   │   └── 2.dat

通过分析文件结构可以知道，我们打包后的执行文件，在 Resources 文件中，项的electron.asar包里。而第三方文件被放置到了 Resources 根目录下，所以 加载第三方资源 可以转换为，获取Resources文件夹中的资源

常用的“../”这里是不行的，需要用的 node.js 中的 path模块，代码如下：

const url = path.resolve(__dirname, "..")
this.datUrl = url + "/1.dat"

其中： path.resolve(__dirname, "..")表示当前目录的父目录的绝对路径，即Resource 目录的绝对路径

这样，就可以获取到第三方文件了。

云服务器 GPU云服务器加载资源 SinF cdn静态资源加载慢 electron

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100617.html

SinF的Electron系列之二---electron-packager命令简析

摘要：我使用来打包文件，打包的特点是，要写一大串命令，或者在根目录下的文件中配置相应的字段如下项目项目项目简单介绍一下用到的打包字段，详细我使用electron-packager来打包文件，electron-packager打包的特点是，要写一大串命令，或者在根目录下的package.json文件中配置相应的字段如下： scripts: { start: electron ., ...

wawor4827 2019-08-23 14:26 评论0 收藏0
SinF的Electron系列之一---Cookie和localStorage

摘要：不支持之前在浏览器中使用的方法，暂时采用解决。需默认的是保存在主流程里面，所以需要使用模块提取的函数，我改写成了，用参考博客里面的方法，无法获得的返回值。官方文档参考博客使用代码通过模块取的原本在主进程中才能使用的模块获得清空缓存保存名称值 Electron不支持之前在浏览器中使用localstroage的方法，暂时采用cookie解决。需Electron默认的cookie是保存在...

wangxinarhat 2019-08-23 14:12 评论0 收藏0
Electron 实战桌面计算器应用

摘要：在菜单中，我想点击子菜单打开一个网站，那么就可以用到方法，则会在默认浏览器中打开打包应用其实将程序打包成桌面应用才是比较麻烦的事。前言 Electron 是一个搭建跨平台桌面应用的框架，仅仅使用 JavaScript、HTML 以及 CSS，即可快速而容易地搭建一个原生应用。这对于想要涉及其他领域的开发者来说是一个非常大的福利。项目介绍仓库地址：lin-xin/calculato...

GeekQiaQia 2019-08-20 19:09 评论0 收藏0
electron 将pc端（vue）页面打包为桌面端应用

摘要：于是乎，就想着把自己写的这个小项目打包成桌面端，方面每次打开电脑就能看。然后继续运行，然后白屏习惯性的首次失败。。解决方法进入文件夹下的将其中的修改为相对路径。再次运行，成功将的项目，显示为桌面应用。总结至此，打包桌面端就这样完成了。背景 showImg(https://segmentfault.com/img/bVYowg?w=1922&h=862); 最近在学习RxJS，平时边看...

Dongjie_Liu 2019-08-21 17:35 评论0 收藏0
Electron 快速入门

摘要：当一个实例被销毁后，相应的渲染进程也会被终止。之所以命名为，主要是为了与主进程这个概念对应。部分在事件触发后才能使用。当全部窗口关闭时退出。主进程接收到消息并处理之后，会返回处理结果。简介 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰...

Drummor 2019-08-20 17:49 评论0 收藏0