所以我决定用three.js做一个项目,react和vite。后来我意识到我不想真正打扰 React,所以我项目中的 React 代码主要是骨架代码(如默认的 App 组件等)。我决定就这样离开它,基本上只专注于学习three.js。我的项目使用npm run dev
. 所以我尝试使用 npm run build 来构建它。它生成一个 dist 文件夹,其中包含一个 index.html 和一个 assets 文件夹。assets 文件夹中有三个文件:
index.02582158.css
index.c83bad18.js
vendor.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”
adjustOrbit 是 typescript 文件中定义的导出类的对象的成员函数。它闪烁得非常快,但我看到 npm run build 确实构建了这个 .ts 文件。所以我不确定我做错了什么。
当我尝试将其放在 GitHub 页面上时,我在上述所有三个文件中都找不到 404。通过更改 dist 内 index.html 中的 src 和 href 从
/assets/index.c83bad18.js
对于./assets/index.c83bad18.js
这三个中的每一个(在每个路径的开头添加一个点),GitHub Pages 停止说 404 not found 并且与尝试使用 vite 运行构建预览有相同的问题。
更新:如果我注释掉前面提到的从导出的 .ts 类中调用对象成员函数的代码,我会得到......我会描述为......我的 three.js 代码中有 25% 实际呈现在屏幕上。它根本不起作用。还有更多关于Uncaught (in promise) DOMException: The element has no supported sources.