[Electron Debug]electron+threejs打包失败的问题思考与解决方案

今天用three+vue3+electron想要做一个数字孪生平台,打包有问题。一直报错three.module.js:5 Fetch API cannot load app://./public/textures/royal_esplanade_1k.hdr. URL scheme "app" is not supported.
然后展开了一个酣畅淋漓的debug对决。首先客观分析,Fetch API cannot load这个报错说明的很清楚,是URL scheme “app” is not supported.也就是说我的自定协议app是不被fetch支持的。
ok,然后我问chatgpt如何修复,chatgpt给我了以下回答:

  1. 使用Electron的protocol模块来处理资源请求: 您可以通过Electron的protocol模块来拦截和处理以app://协议发起的请求,并将它们映射到文件系统上的实际路径。这样,无论资源请求使用的是http://还是app://协议,都能正确地加载资源。

    javascriptCopy code
    const { app, protocol } = require('electron');
    const path = require('path');
    
    app.on('ready', () => {
      protocol.registerFileProtocol('app', (request, callback) => {
        const url = request.url.substr(6); // 去除'app://'协议头
        const decodedUrl = decodeURIComponent(url); // 解码URL
        const finalPath = path.normalize(`${__dirname}/${decodedUrl}`); // 生成绝对路径
        callback({ path: finalPath });
      });
    });
    
  2. 在开发环境和生产环境中使用不同的资源加载策略: 您可以在代码中检测当前环境(开发或生产),并根据环境不同采用不同的资源加载路径或方法。例如,在开发环境中直接使用相对路径加载资源,在生产环境中使用app://协议。

  3. 将资源嵌入到应用中: 另一种方法是将资源(如图像、样式表、脚本等)嵌入到您的JavaScript包或HTML文件中,这样就不需要通过网络请求来加载这些资源了。这可以通过各种打包工具(如Webpack)实现,通过将资源转换为Base64编码的数据URL来嵌入

  • 第二个很明显就是废话
  • 第一个是一个配置一个类似于中间层的东西去将协议解构一下.
  • 第三个我傻乎乎的试了,因为这个只是一个demo给甲方看的,所以无所谓其他。结果不行。因为它太大了,几M的东西塞文件里,很难的辣。

很明显,第一个看起来健康多了。他的解决方案看上去应该是去配置一个中间层,对一个协议进行跳转,听起来很不错。但测试后发现,有问题,因为fetch不支持的是协议名,就是它压根不会进中间层,你头都进不去,fetch一看你是app,根本不会发起请求而是直接over! 那怎么办捏!

我要检讨一下自己,最开始搜索的关键字是electron+vue+threejs打包失败,这是一种很低效的搜索方式。因为它脱离了实际问题,我的实际问题是什么?我的实际问题是three.module.js:5 Fetch API cannot load app://./public/textures/royal_esplanade_1k.hdr. URL scheme "app" is not supported但Fetch就一定是Three在用吗? 不一定。

然后就搜索three.module.js:5 Fetch API cannot load app://./public/textures /royal_esplanade_1k.hdr. URL scheme "app" is not supported,然后找到一篇付费csdn文章。

[Electron Debug]electron+threejs打包失败的问题思考与解决方案

最后借了同学号,解决方案是

在看 protocol.registerSchemesAsPrivileged 配置时,我发现到一个配置:

protocol.registerSchemesAsPrivileged(customSchemes)

privileges Object (可选)

  • standard Boolean (可选) -默认为false
  • secure Boolean (可选) – 默认为false
  • bypassCSP Boolean (可选) – 默认为false
  • allowServiceWorkers Boolean (可选) – 默认为false
  • supportFetchAPI Boolean (可选) – 默认为false
  • corsEnabled Boolean (可选) – 默认为false

一行代码秒了

protocol.registerSchemesAsPrivileged([
  {scheme: 'app', privileges: {secure: true, standard: true,supportFetchAPI: true, corsEnabled: true, stream: true}}
])

原文链接:https://juejin.cn/post/7343893453677428788 作者:Jrenc

(0)
上一篇 2024年3月9日 上午10:27
下一篇 2024年3月9日 上午10:37

相关推荐

发表回复

登录后才能评论