网站未加载脚本、CSS 或 Three.js答案

【问题标题】：Website is not loading the script, CSS, or Three.js网站未加载脚本、CSS 或 Three.js
【发布时间】：2022-02-07 11:55:38
【问题描述】：

首先让我说我在 HTML、javascript 以及整体网站创建和托管方面的经验非常少，如果我提供的信息不足，请提前道歉。我正在尝试使用来自three.js 的3d 对象来创建网站，但是，“实时服务器”中没有加载任何内容（当我将整个网站上传到Cpanel 时），但是，当我使用Visual Studio 代码运行它时通过我的本地服务器（通过命令 npm run dev），网站按预期显示。我已经截取了页面：

correct page

incorrect page

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

加载模块脚本失败：需要一个 JavaScript 模块脚本，但服务器响应 “文本/css”的 MIME 类型。执行严格的 MIME 类型检查每个 HTML 规范的模块脚本。

和

未捕获的语法错误：无法在模块外使用 import 语句

我的 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>

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

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

没有。

了解浏览器的导入功能与 Node 或使用 Webpack 之类的打包器进行开发的功能非常不同。在浏览器导入中，脚本必须是 module 类型（从而导致无法使用 import 语句 out of module 错误）<script type="module" ...（带引号！）。您还需要引用以./、../ 或/ 开头的导入文件（您已经在这样做）。最后，您只能导入 JavaScript 文件，不能导入 CSS。

你有两个选择：

使用像 Webpack 这样的打包工具将您的文件编译成一个文件（并删除导入语句）
（首选）删除 import './style.css' 并在 HTML 中添加 <link rel="stylesheet" href="./style.css" type="text/css" /> <head>

【讨论】：