THREE.FileLoader加载文件仅返回index.html内容问题求助

你遇到的问题由两个原因共同导致：

1. Parcel 开发服务器默认开启 SPA 回退规则：当请求的静态资源路径不存在时，会直接返回 index.html 的内容，这就是你无论传入什么不存在的路径都拿到相同结果的核心原因。
2. 你存放在 src 目录下的 test.txt 没有被正确纳入打包流程：Parcel 只会主动处理代码中显式引入、或者 HTML 中直接引用的资源，你直接在 FileLoader 里写死字符串路径 "test.txt"，Parcel 无法识别这是资源引用，不会把 test.txt 打包到最终输出目录，自然请求就会命中 SPA 回退规则。

解决方法（两种方案二选一） #

方案一：通过 import 引入资源（推荐）

Parcel 默认支持直接导入文本文件，导入后会自动返回该文件打包后的可访问路径，步骤如下：

1. 在 main.js 顶部添加导入语句，注意路径要和你项目里 test.txt 相对于 main.js 的实际路径匹配：

import testTxtPath from './test.txt';

2. 把 loader.load 的第一个参数替换为导入的路径变量即可：

loader.load(
    testTxtPath,
    function (data) {
      console.log(data);
    },
    function (xhr) {
      console.log(
        "Loading file : " +
          (xhr.loaded / xhr.total) * 100 +
          "% loaded"
      );
    },
    function (err) {
      console.error(err);
    }
);

方案二：使用公共资源目录

如果你不想在代码里导入资源，可以在项目根目录新建 public 文件夹，把 test.txt 放到 public 目录下，Parcel 会自动把 public 里的所有资源原样复制到打包输出的根路径，此时直接加载路径 /test.txt 即可：

loader.load(
    "/test.txt",
    // 剩余回调逻辑保持不变
)

修改完成后重启 Parcel 开发服务器，清理浏览器缓存后再验证即可。

内容的提问来源于stack exchange，提问作者Thibault Rolland