[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文章。

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

在看 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