使用 Three.js/react/vite 制作的项目在使用 vite 和 typescript 编译器构建时会中断，但使用 npm run dev （开发服务器）可以正常工作

Question

所以我决定用 Three.js、react 和 vite 来做一个项目。后来我意识到我并不想真正为react操心，所以我项目中的react代码主要是骨架代码（如默认的App组件等）。我决定就这样保留它，基本上只专注于学习 Three.js。我的项目使用

npm run dev

运行良好，但我想将其部署在 Github Pages 上。所以我尝试使用 npm run build 来构建它。它生成一个 dist 文件夹，其中包含一个index.html 和一个assets 文件夹。资产文件夹内有三个文件：

index.02582158.css

index.c83bad18.js

供应商.5957e3fb.js

我猜这是某种压缩的 css，另外两个是经过编译的 typescript/typescript React 文件？

当我尝试运行构建的 dist 文件夹时，使用

npm run serve

它说

vite v2.3.8 build preview server running at: Local: http://localhost:5000/

我访问该页面，它是黑屏，每个错误都是这样的：

index.c83bad18.js：1未捕获的类型错误：无法读取未定义的属性“调整轨道”

adjustOrbit 是打字稿文件中定义的导出类的对象的成员函数。它闪烁得很快，但我看到 npm run build 确实构建了这个 .ts 文件。所以我不确定我做错了什么。

当我尝试将其放在 GitHub 页面上时，我收到了 404 not found on all 上述三个文件。通过更改其 srcs 和 hrefs 在 dist 内的 index.html 中

对于这三个路径中的每一个（在每个路径的开头添加一个点），从

/assets/index.c83bad18.js

到

./assets/index.c83bad18.js

，GitHub Pages 不再显示 404 未找到，而只是与尝试使用 vite 运行构建预览具有相同的问题。

更新：如果我注释掉前面提到的导出的 .ts 类中调用对象成员函数的代码，我会得到...我所描述的...我的 Three.js 代码的 25% 实际呈现在屏幕上。它根本不起作用。还有更多关于

Uncaught (in promise) DOMException: The element has no supported sources.

的错误

Answer 1

我想我找到了解决方案。我说思考，因为我不久前解决了这个问题，但忘记写下我是如何解决的。我很确定这是因为我的 Three.js 代码找不到任何使用的资源，因此当从 TypeScript 编译为 JavaScript 时整个项目会中断。为了解决这个问题，我导入了所有使用的资源，以便它们与其他所有资源一起编译：

import skyboxTop from './assets/skyboxwithsun/top.png?url'

在我做类似的事情之前

 txtLoader = new THREE.TextureLoader("./assets/skyboxwithsun/top.png", callbackfunc)

现在我知道了

txtLoader = new THREE.TextureLoader(skyboxTop, callbackfunc)

但我想它失败的原因是因为当 vite 构建应用程序时，该资源 top.png 被编译成一些奇怪的文件名，它将类似于 c3ga867fj34.png

所以因为我的加载程序无法解析这些网址，我认为这就是一切都崩溃的原因。导入可确保

skyboxTop

在运行时可用。

Answer 2

根据上面的答案，如果您更喜欢导入资源的原始风格，您可以使用 require() 。这看起来更像是一个 React 语法问题。