我正在尝试在html脚本中导入threeJs模块以进行测试,当我下载three.js文件并具有指向它的链接时,它就可以正常工作。但是尝试更改模块给我带来了麻烦。我有以下代码导入Three.js模块。
<html lang="en">
<head>
<title>ThreeJs Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<script type="module">
import * as THREE from '/node_modules/three/build/three.module.js';
</script>
</body>
</html>
这样做时出现以下错误: 错误
我具有以下文件结构: 文件结构
在节点服务器中,我要路由到具有以下代码的js文件:
const path = require('path');
const router = express.Router();
const fileDir = path.join(__dirname, '../../pages/threeTest');
router.use('/', express.static(fileDir));
router.get('/', (req, res) => {
res.sendFile(fileDir+'/html/index.html')
});
module.exports = router;
我的路由和服务器工作正常,但是当html / js文件需要从客户端导入模块时,我无法设法使其正常工作。如果它是简单的修复或即时消息做的愚蠢也就不足为奇了。抱歉,是这样。
您必须将three.module.js
文件移动到Express可以使用的位置。例如,如果您有一个公用文件夹,在该three.module.js
文件夹中还有Express提供的其他静态文件,则将该文件放在此处,然后在html脚本的import语句中将正确的URL指向该资源。
换句话说,网络浏览器无法访问/node_modules/three/build/three.module.js
。这些是Express默认情况下从Web浏览器隐藏的服务器端文件。
为了能够使用这三个文件夹中的其他文件,例如装载机,照明灯,等等,我是否需要将整个三个文件夹移动到node_modules内,或者three.modules.js文件足够吗?
容易混淆。您必须了解Web浏览器正在读取html文件,并且Web浏览器只能访问由Web服务器提供的文件(Express)。
node_modules
Express不提供该文件夹中的文件。如果要让Web浏览器访问js文件,则必须在Express项目中创建一个公用的文件夹,并将js文件放入该文件夹中。然后修改导入的URL指向该资源。这是一个说明如何提供文件的链接。完美,似乎可以解决问题。我现在应该知道这一点。感谢您的回答和快速回复。