首先我要说的是，我对 HTML、JavaScript 以及整个网站创建和托管方面的经验很少，如果我提供的信息有欠缺，请提前表示歉意。我正在尝试使用 Three.js 中的 3D 对象创建一个网站，但是，当我使用 Visual Studio 代码运行它时，“实时服务器”中没有加载任何内容（当我将整个网站上传到 Cpanel 时）通过我的本地服务器（通过命令 npm run dev），网站按预期显示。我已经截图了页面：
当我在损坏的页面上打开元素检查时，我通过控制台收到以下错误：
无法加载模块脚本：需要 JavaScript 模块脚本，但服务器以 MIME 类型“text/css”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
和
未捕获的语法错误：无法在模块外部使用 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>
我怎样才能解决这个问题？任何帮助，将不胜感激！
不。
了解浏览器导入功能与 Node 的导入功能或使用 Webpack 等捆绑器进行开发有很大不同。在浏览器导入中，脚本必须是类型module（从而导致无法使用模块外导入语句错误）<script type="module" ...（带引号！）。./您还需要引用以、../或开头的导入文件/（您已经在这样做）。最后，您只能导入 JavaScript 文件，而不能导入 CSS。
您有两个选择：
import './style.css'并添加<link rel="stylesheet" href="./style.css" type="text/css" />到 HTML 中<head>| 归档时间： |
|
| 查看次数： |
8737 次 |
| 最近记录： |