Node.js+Express环境下Three.js本地模块导入404问题求助

问题原因 #

浏览器原生ES模块不支持直接通过包名（比如three）导入npm安装的依赖，它会把import * as THREE from 'three'解析为向/three发送请求，但你的Express仅托管了public目录，node_modules里的Three.js文件并未被暴露给浏览器，因此返回404。

解决方案 #

方案1：直接映射模块路径并托管node_modules（快速临时解决）

1. 修改Express配置，让它同时托管node_modules目录：

const express = require('express')
const app = express()
const port = 3000

// 托管public和node_modules目录
app.use(express.static('public'));
app.use(express.static('node_modules'));

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

2. 修改main.js的导入路径，指向Three.js的ES模块入口文件：

// 直接引用node_modules中three的ES模块文件
import * as THREE from 'three/build/three.module.js';

方案2：使用import maps（更优雅的原生方案）

1. 同样先按方案1修改Express配置，托管node_modules；
2. 在HTML的<head>中添加importmap，告诉浏览器包名对应的真实路径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 添加import map -->
    <script type="importmap">
      {
        "imports": {
          "three": "/three/build/three.module.js"
        }
      }
    </script>
    <script type="module" src="main.js"></script>
</head>
<body>
    <h1>yo bro who gotchu smile like that</h1>
</body>
</html>

这样main.js里原来的import * as THREE from 'three'就能直接生效，无需修改。

方案3：使用模块打包工具（推荐用于生产/长期开发）

如果项目需要长期维护，推荐用Vite、Webpack这类工具处理模块打包：

1. 初始化Vite项目：

npm create vite@latest . -- --template vanilla

2. 安装依赖：

npm install
npm install three

3. 将原public目录中的代码迁移到Vite项目结构下（HTML放根目录，main.js放src目录）；
4. 本地开发运行npm run dev，打包生产版本用npm run build，打包后的dist目录可以用Express托管。

内容的提问来源于stack exchange，提问作者Sundae Not