vue + threejs 报错 You may need an appropriate loader to handle this file type.

错误出现时间：2021年6月3日

今有需求，需要在vue项目中加入3D模型展示模块，故联想到vue + threejs框架实现。

于是按步骤首先引入安装threejs，

npm install three

在需要使用threejs的文件中引用

import * as Three from "three"

不写逻辑代码空跑一边项目

npm run dev

结果发现竟然不写任何逻辑代码只是引用threejs就出错了，控制台报错如下

 ERROR  Failed to compile with 1 errors 
 error  in ./node_modules/three/build/three.module.js

Module parse failed: Unexpected token (2517:25)
You may need an appropriate loader to handle this file type.
|
|               this.texture = source.texture.clone();
|               this.texture.image = { ...this.texture.image }; // See #20328.
|
|               this.depthBuffer = source.depthBuffer;

 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/dms/dataDetail.vue 122:0-31
 @ ./src/views/dms/dataDetail.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8090 webpack/hot/dev-server ./src/main.js
复制代码

重要的报错信息主要是：

You may need an appropriate loader to handle this file type

上百度搜索，说是一般出现这种情况是webpack打包出错，需要更改webpack.config.js，下边贴两张博客图

报错 You may need an appropriate loader to handle

于是打开webpack.config.js，并多方尝试，并未解决问题。

放置了一段时间，尝试重新安装一下threejs或者安装旧版本threejs看是否能解决问题。

于是命令行输入命令，查看threejs的所有版本。

npm view three versions --json

发现到目前为止threejs最新版本为”0.129.0″

卸载当前项目中的threejs

npm uninstall three

安装之前的旧版本threejs”0.128.0″

npm install three@0.128.0

在项目需要使用threejs的位置引入

import * as Three from "three"

不写逻辑代码空跑一遍项目

npm run dev

成功了！！！

写相应的逻辑代码，成功展示3d模型！！！