我正在学习一个three.js示例，当我在javascript模块中使用import时，我会得到错误：Loading module from “http://localhost:8000/build/three.module.js” was blocked because of a disallowed MIME type (“”).
当我传统上使用脚本标记导入时，我不会得到这个错误。这是我的代码：
注释行将呈现旋转立方体
<!DOCTYPE html>
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from '/build/three.module.js';
// const scene = new THREE.Scene();
// const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// const renderer = new THREE.WebGLRenderer();
// renderer.setSize( window.innerWidth, window.innerHeight );
// document.body.appendChild( renderer.domElement );
// const geometry = new THREE.BoxGeometry();
// const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// const cube = new THREE.Mesh( geometry, material );
// scene.add( cube );
// camera.position.z = 5;
// const animate = function () {
// requestAnimationFrame( animate );
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
// renderer.render( scene, camera );
// };
// animate();
</script>
</body>
</html>
相比之下，这很好：
<!DOCTYPE html>
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="build/three.js"></script>
<script>
// ...
</script>
</body>
</html>
我的文件结构是：
|_index.html
|_ ...
|_build/
|_ three.module.js
|_ three.js
|_ ...
为什么在模块中使用import时会出现MIME类型错误？我希望能够使用这种导入方法，因为所有其他三个.js示例似乎都在js模块中这样做。
当我在three_js/examples/文件夹中启动http服务器时，我收到了相同的错误消息Loading module from “http://localhost:8080/build/three.module.js” was blocked because of a disallowed MIME type (“”).。在three_js/中启动http服务器可修复此问题。原因是对我来说import语句是import * as THREE from '../build/three.module.js';。我不确定这是否能解决你的确切问题，但它似乎密切相关。