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

Question

所以我决定用 three.js 做一个项目，react 和 vite。后来我意识到我不想真正为 React 而烦恼，所以我项目中的 React 代码主要是骨架代码（比如默认的 App 组件等）。我决定就这样离开它，只专注于学习 three.js 。我的项目使用 npm run dev 运行良好，但我想将它部署在 Github 页面上。所以我尝试使用 npm 运行 build 来构建它。它生成一个 dist 文件夹，其中包含一个 index.html 和一个 assets 文件夹。在 assets 文件夹中有三个文件：

index.02582158.css

index.c83bad18.js

供应商。5957e3fb.js

我猜这是某种压缩的 css，另外两个是 typescript/typescript 转译的反应文件？

当我尝试 运行 构建的 dist 文件夹时，使用 npm run serve 它说

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

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

index.c83bad18.js:1 未捕获的类型错误：无法读取未定义的 属性 'adjustOrbit'

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

当我尝试将它放在 GitHub 页面上时，我得到一个 404 未在上述所有三个文件中找到。通过在 dist from

中的 index.html 中更改它们的 srcs 和 hrefs

/assets/index.c83bad18.js 到 ./assets/index.c83bad18.js 这三个中的每一个（在每个路径的开头添加一个点），GitHub Pages 不再说 404 not found 并且只是有同样的问题尝试 运行 使用 vite 进行构建预览。

更新：如果我注释掉前面提到的导出的 .ts class 中调用对象成员函数的代码，我得到...我将描述为...我的 25% three.js 实际呈现在屏幕上的代码。它根本不起作用。还有更多关于 Uncaught (in promise) DOMException: The element has no supported sources.

的错误

Answer 1

我想我找到了解决办法。我说思考，因为我刚才解决了这个问题，忘了写下我是怎么想出来的。我很确定这是因为我的 three.js 代码找不到任何使用的资产，所以当从打字稿编译到 javascript 时整个项目会中断。为了解决这个问题，我导入了所有使用的资产，以便它们与其他所有内容一起编译：

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

在我做类似

的事情之前

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

现在我做

txtLoader = new THREE.TextureLoader(skyboxTop, callbackfunc)

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

因为我的加载程序无法解析这些 url，所以我认为这就是一切都崩溃的原因。导入确保 skyboxTop 在运行时可用。