网站未加载脚本，CSS，或 Three.js

Question

首先要说的是，我在 HTML、javascript 以及整个网站创建和托管方面的经验很少，如果我提供的信息不足，请提前致歉。我正在尝试使用 three.js 中的 3d 对象制作网站，但是，'live server' 中没有加载任何内容（当我将整个网站上传到 Cpanel 时），然而，当我使用 visual studio 通过我的本地服务器（通过命令 npm 运行 dev）向运行编码，该网站按预期显示。我已经截取了页面：

correct page

incorrect page

当我在损坏的页面上打开元素检查时，通过控制台收到以下错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

和

Uncaught SyntaxError: Cannot use import statement outside a module

我的 script.js 中有以下代码：

import './style.css'
import * as THREE from '../node_modules/three/build/three.module.js'
import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js'
import { HemisphereLight, Sphere, SRGB8_ALPHA8_ASTC_12x12_Format, sRGBEncoding, Texture, TextureEncoding } from '../node_modules/three/build/three.module.js'
import gsap from '../node_modules/gsap/all.js'

var gltfLoader = new GLTFLoader()
let tl = gsap.timeline()
var diamond = null

我也在用它来调用index.html中的脚本，但是，我不确定这是否是调用脚本的正确方法。

  <script type=module src="script.js"></script>

我该如何解决这个问题？任何帮助将不胜感激！

Answer 1

没有

了解浏览器导入功能与 Node 或使用 Webpack 等捆绑器进行开发的功能有很大不同。在浏览器导入中，脚本必须是 module 类型（因此导致无法在模块外使用导入语句错误）<script type="module" ...（带引号！）。您还需要引用以 ./、../ 或 / 开头的导入文件（您已经在这样做）。最后，您只能导入 JavaScript 个文件，而不是 CSS.

您有两个选择：

使用像 Webpack 这样的打包器将你的文件编译成一个文件（并删除导入语句）
（首选）删除 import './style.css' 并在 HTML <head>

<link rel="stylesheet" href="./style.css" type="text/css" />

网站未加载脚本，CSS，或 Three.js

Website is not loading the script, CSS, or Three.js

html

javascript

three.js