Three.js npm环境下模块导入路径错误排查求助

问题根源 #

浏览器原生ES模块不支持直接导入three这类裸模块标识符，它只识别相对路径（./、../）或绝对路径，这就是你看到Failed to resolve module specifier "three"错误的核心原因。你已经安装了Vite，完全不需要Webpack，Vite本身就是为处理这类现代模块场景设计的，用它足够解决问题。

具体解决方案 #

• 必须通过Vite开发服务器启动项目
  不能直接双击HTML文件运行，这样浏览器还是用原生ES模块加载，识别不了npm包。正确操作是：

  1. 在项目根目录执行npm run dev
  2. 访问终端输出的本地地址（如http://localhost:5173），此时Vite会自动将裸模块标识符转换成浏览器能识别的路径

• 正确导入Three.js及GLTFLoader
  GLTFLoader属于Three.js的附加模块，需从官方指定的three/addons/路径导入，不用手动写node_modules的相对路径：

  // 导入核心Three.js模块
  import * as THREE from 'three';
  // 导入GLTFLoader附加模块
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  

• 确认项目依赖配置
  如果是手动添加Vite到现有项目，确保package.json中有正确的启动脚本：

  {
    "scripts": {
      "dev": "vite",
      "build": "vite build"
    }
  }
  

  同时保证是在项目根目录执行的npm install three，npm默认会把依赖装在当前命令执行的目录下，确保node_modules处于项目根层级。

关于node_modules层级的说明 #

node_modules默认放在项目根目录，Vite会自动从这个目录查找并解析依赖，你不需要手动调整路径前缀，只要通过Vite启动项目，它会帮你完成模块的打包和路径转换。

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