[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给我了以下回答:

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

javascript 复制代码

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 });
  });
});

在开发环境和生产环境中使用不同的资源加载策略： 您可以在代码中检测当前环境（开发或生产），并根据环境不同采用不同的资源加载路径或方法。例如，在开发环境中直接使用相对路径加载资源，在生产环境中使用app://协议。
将资源嵌入到应用中： 另一种方法是将资源（如图像、样式表、脚本等）嵌入到您的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

一行代码秒了

php 复制代码

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