electron打包中的巨坑解决记录

目录
  • 吐槽
  • 问题一：css文件中图片加载失败
    • 问题描述
    • 解决过程
    • 补充
  • 问题二：无法使用cookie
    • 问题描述
    • 原因分析
  • 总结

吐槽

从上周五到今天，我被electron打包折磨得死去活来，本来想让测试用桌面端的，现在不得不改用web端，真的好无语。今天解决问题顺利打包后来记录一下这个问题。

问题一：css文件中图片加载失败

问题描述

问题是这样的，electron打包为桌面端以后，登录页的表单是正常显示的，但是整个页面的背景图没了。我百度了一下，发现大多是说白屏啥的，但是我不是白屏啊，我的表单能正常显示，为此，我在生产环境打开了调试工具：

 createProtocol('app')
 // Load the index.html when not in development
 win.loadURL('app://./index.html')
 win.webContents.openDevTools()

发现原来是我的css文件中的图片路径错了：

到底错在哪儿？随意看看一份正常加载的js文件就知道了：

原来是app://./ 开头而不是 app://,真的是大冤种转世了！ 我发现此问题只存在于css文件中的background:url()这样的代码里，项目使用的是vue-cli脚手架，也就是使用的webpack，我在这已经知道大致是某些loader和plugin处理时造成的bug了。

解决过程

竟然知道了是loader和plugin的锅，刚开始我尝试自已写一个loader，只要通过一行正则表达式大概就能解决问题了：

  const res= content.replace(/app:\/\/\//,"app://./");
  //app-loader
  module.exports = function (content) {
    return content.replace(/app:\/\/\//, "app://./");
}

但我失败了。 原因在于我匹配了css文件，但是vue-cli脚手架已经为css文件的处理内置了许多的loader,我们可以通过 vue inspect查看实际的webpack配置来观察loader情况

vue inspect --mode production >> webpack.test.js

其依次使用了postcss-loader、css-loader和extract-css-loader,那么，我们将自定义的app-loader放在extract-css-loader之前不就好了（注意webpack中的loader执行顺序从右到左）， 通过chainWebpack这项vue-cli提供的链式配置（实际封装了webapck-chain这个插件）来将我们的loader加入。

 if (IS_PROD) {
            config.resolveLoader.modules.add("./src/loaders");
            config.module.rule('css').oneOf('vue-modules').use('app-loader').before('extract-css-loader').loader('app-loader')
        }

然而经过打包后我又失败了，依然是app:/// 这样的路径。

到底为什么？

原因在于extract-css-loader是由mini-extract-css-plugin提供的，而熟悉它的小伙伴们都知道，这两个是配套使用的，因此，当我尝试在我的loader中输出文件内容时，我将得到如下信息：

我不得不怀疑实际修改代码，划分chunks的操作是在该plugin中完成的，看来还是写一个plugin来处理吧！ 但当前我来不及阅读mini-extract-css-plugin的源码了，我只能想到在插件的hooks中找到一个合适的时机去处理已经被处理转换的代码，最终我选择了emit这个hook。 处理代码如下：

 compiler.hooks.emit.tap('AppPlugin', (compilation) => {
            compilation.assetsInfo.forEach((assetsItem, key) => {
                if (/\.css$/.test(key) && !/^static\/lib\//.test(key)) {
                    compilation.assets[key]._value = compilation.assets[key]._value.replace(/app:\/\/\//g, "app://./")
                }
            })
        })

这段代码解释起来就是compilation中的assets存放着所有的之前处理后的代码，由于使用了emit 这个hook，也就是即将被webpack输出的代码，通过遍历assetsInfo(相当于assets这个对象里的代码清单，key是即将输出的相对路径),只要判断其所有的css文件，将 _value 也就是要处理代码使用正则替换就可以了（为什么知道是它？调试时不断打印发现的）。

经过验证，该方法可行。

补充

此部分需要有一定的webpack基础，我也是不停查阅官方文档和不停百度了解了一些属性和配置，如何手写loader和plugin的帖子很多，我就不做搬运了。

问题二：无法使用cookie

问题描述

当我登录页面登录后发现登录失败，任由我怎么登录都是停留在登录页面。

原因分析

这个问题还是比较容易解释的，毕竟我用了app://这样的协议，不是web端上的http:// 这样的，cookie就挂了。然后嘛，我的路由守卫由于无法访问cookie获取到token就一直停留在登录页面。 正确的做法就是改用sessionStorage或者localStorage来存储token。

总结

electron确实太坑了，只要足够有耐心问题最终也能顺利解决，多看文档多调试就是了。大家还碰上哪些electron的坑呢？

以上就是electron打包中的巨坑解决记录的详细内容，更多关于electron打包坑解决的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Electron 剪贴板实现示例详解

    目录 正文 availableFormats readText 和 writeText readHTML 和 writeHTML readImage 和 writeImage readRTF 和 writeRTF clear 正文 在浏览器中可以通过 JavaScript 脚本来读写剪贴板数据,常用的是 document.execCommand 方法: // 复制数据 const inputElement = document.querySelector('#input') inputEleme

  • electron渲染进程主进程相互传值示例解析

    目录 在electron中分为渲染进程和主进程 浏览器传值给主进程 浏览器环境 主进程 主进程传值给渲染进程 主进程 渲染进程 注意 在electron中分为渲染进程和主进程 渲染进程就是浏览器环境,主进程就是node环境 既然他们是不同的环境,那么为我们怎么让他们相互关联起来呢?或者说怎么传递值? 毕竟在开发中可能会遇到我想要的值只能在node环境中才能获取,然后node中可能也会需要浏览器环境的值:这个时候就需要两个环境联通起来相互传值 浏览器传值给主进程 浏览器环境 引入: import

  • 一文详解Electron 电源状态管理

    目录 Electron 电源相关模块 其中 powerMonitor 模块提供的接口 powerSaveBlocker 模块提供的方法 空闲状态监控 电源状态监控 锁屏和解锁 休眠和唤醒 系统行为阻断 Electron 电源相关模块 在 Electron 中有两个模块是跟电源相关的: powerMonitor:用于获取电源相关信息,监听电源相关事件 powerSaveBlocker:用于阻止系统进入睡眠状态 其中 powerMonitor 模块提供的接口 powerSaveBlocker 模块提

  • Electron 网络拦截实战示例详解

    目录 正文 自定义 UA 绕过跨域限制 请求转发 正文 Electron 提供的 webRequest API,允许开发者对网络进行过滤和监听,并且可以修改 header 字段甚至请求地址,功能非常强大,它的类结构如下: 不过需要注意,该模块只能在主进程中使用,接下来为大家介绍 webRequest 三个非常典型的使用场景: 自定义 UA 有些接口为了过滤非法请求,会首先校验 UserAgent,正常的浏览器是无法伪造 UA 的,不过在 Electron 里面可以很容易做到,webRequest

  • electron 中 webview的使用示例解析

    目录 正文 获取webview的dom webview 页面 webview页面的代码 新建public/preload.js文件 监听页面对否显示 禁止打开新窗口 刷新页面 上一页 下一页 正文 webview 想必都有所了解,比如:微信小程序嵌套H5 那么我们在electron中怎么使用webview呢? 我们先跟着官方文档展示一下,看是否能有效果: 若要在应用程序中嵌入网页, 请将 webview 标签添加到应用程序的被嵌入页面中 (这是将显示外来内容的应用程序页). 在最简单的例子中,

  • Electron调用外接摄像头并拍照上传实现详解

    目录 背景 需求分析 实现 视频采集 MediaDevices.getUserMedia() 拍照生成图片 上传图片至CDN 1. 使用HTMLCanvasElement.toBlob() 语法 参数 2. 使用HTMLCanvasElement.toDataURL() 语法 参数 返回值 总结 背景 基于Electron实现的pc端智能验机应用,近期迭代了一个新的功能,需求是通过电脑外接摄像头对手机屏幕进行拍照,拍照后需将照片上传至服务端进行屏幕信息比对,确定被检测屏幕是否为原厂屏. 需求分析

  • ScheduledThreadPoolExecutor巨坑解决

    目录 概述 坑是啥? 怎么坑的? 总结 概述 最近在做一些优化的时候用到了ScheduledThreadPoolExecutor. 虽然知道这个玩意,但是也很久没用,本着再了解了解的心态,到网上搜索了一下,结果就发现网上有些博客在说ScheduledThreadPoolExecutor有巨坑!!! 瞬间,我的兴趣就被激起来了,马上进去学习了一波- 不看不知道,看完后马上把我的代码坑给填上了- 下面就当记录一下吧,顺便也带大家了解了解,大家看完后也赶紧看看自己公司的项目代码有没有这种漏洞,有的话赶

  • iOS schem与Universal Link 调试时踩坑解决记录

    目录 简介 AppDelegate和SceneDelegate 问题:在iOS13以上冷启动的时候不会走代理函数! 如果你用了Scheme方式: iOS13之前会走这个代理函数 iOS13之后会走 如果你用了Universal Link方式: iOS13之前会走这个代理函数 iOS13之后会走 总结 简介 scheme和Universal Link是在iOS中两种可以在网页中点击回跳到自己预定的APP的两种方式.至于这两种方式需要怎么配置,这里就不做详细的介绍了.网上的文章一搜一大堆.今天主要是

  • Storybook 7.0 Beta Vue3踩坑解决记录

    目录 故事背景 坑一: 坑二: 坑三: 总结 故事背景 基于 Vue + Vite + TS 结合 pnpm 的一个 monorepo 项目的组件库文档编写,起初个人是比较倾向于直接使用全家桶系列的 VitePress.无奈公司中其他库文档均使用 Storybook,并且已经升级到最新版本. 好吧,到这里就基本知道了自己要做什么了. 由于之前也没有接触过这个玩意儿,就去看着官网一步步操作去了.坑也就在这里了,谁知道版本上去了,文档却没有做出相应的调整.然后就有了后续一系列的问题.Storyboo

  • 关于在LayUI中使用AJAX提交巨坑记录

    如下所示: <script> layui.use(['layer', 'form','laydate'], function(){ var layer = layui.layer ,laydate=layui.laydate ,form = layui.form; form.on('submit(go)', function(data){ $.ajax({ url:'/user/addOrUpdate', method:'post', data:data.field, dataType:'JS

  • 用electron打包vue项目中的报错问题及解决

    用electron打包vue项目中的报错问题及解决

    目录 1.  首先一定要cd到项目的根目录 2.  接下来运行 如何用electron打包vue项目,请参见我的另一篇文章:如何用electron打包vue项目为桌面应用文件exe 这里,也要提到实际项目中的问题,可能有同志的目录结构和内容有些许差别,就我刚刚遇到的问题来说,常见的问题的有几个问题,以及解决办法如下: 1.  首先一定要cd到项目的根目录 (我这里是app)里面才能运行项目,再重新npm run build,不然的话很有可能出现 “ 系统找不到路径的问题 ”,成功的话会出现下面绿

  • Echarts在Taro微信小程序开发中的踩坑记录

    Echarts在Taro微信小程序开发中的踩坑记录

    背景 近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库 对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小 由于笔者对e

  • 关于electron打包的坑

    首先electron打包的方式有两种 通过electron-builder 通过electron-package 两种方式,electron-builder打包的话扩展性更强,包也较小,electron-package打出来的包相对扩展性更小,且包容量较大,一般都会选择electron-builder进行打包. 注意electron和electron-build版本的问题 1.两者配套使用,如果两者的包不是配套的,版本不适配那么就会导致打包失败,因此我们使用electron-builder打包的

  • 详解记录MySQL中lower_case_table_names的坑

    1 起因 项目迁移数据库, 重新启动后, 报错"T_AAA表不存在", 但数据库中可以查看到该表并有数据 2 问题分析 通过重装系统与数据库, 确认系统与数据库纯净, 排除系统和数据库的原因 使用同一方式恢复两天前和一天前的数据备份, 同样不能启动项目, 排除数据内容的原因 使用mysqldump和导出SQL文件两种方式, 恢复一天前的数据, 同样不能启动项目, 排除恢复方式的原因 以上方式基本是运维人员参与, 等技术总监参与观察项目报错后, 猛然发现是表名大小写的问题, 通过测试最终

  • mybatis.type-aliases-package之巨坑的解决

    mybatis.type-aliases-package之巨坑 mapper.xml中的resultType中经常会用到一些自定义POJO,你可以用完全限定名来指定这些POJO的引用 例如: <select id="getUsers" resultType="com.majing.learning.mybatis.entity.User">, 又或者你可以通过在application.properties中指定POJO扫描包来让mybatis自动扫描到自

  • 解决springCache配置中踩的坑

    目录 springCache配置中踩的坑 先附上正确的配置 springCache配置及一些问题的解决 配置 @Cacheable参数 @CacheEvict 参数 @CachePut 参数 springCache配置中踩的坑 项目基于SpringBoot,使用了SpringCache. 早先在网上找了一份SpringCache的配置,后来由于需要使用到自定义序列化方法,注入一个自定义的序列化类.但是在后来发现自定义的序列化类始终没有调用,后来查看源码后终于发现了原因 先附上正确的配置 @Bea

随机推荐