vue-cli3，vue-cli4使用three.js请求本地模型文件报错

请求路径会报错 We're sorry but taizhou doesn't work properly without JavaScript enabled. Please enable it to continue.

本文使用vue-cli版本不知道可以用 vue --version 查询

@vue/cli 4.5.12

因为项目原因需要从原来的vue-cli2 升级为 vue-cli4

升级前使用的方法

           var loader = new GLTFLoader().setPath('../../../static/taizho/Monster/')
           loader.load('Monster.gltf', function (gltf) {
            gltfgroup.add(gltf.scene)
          })

　　本地文件存放在static下可以正常请求，升级为 vue-cli 后把原本地文件放入 public 中，相同的请求方法却会报错

查看后发现是请求不到文件导致报错 We're sorry but taizhou doesn't work properly without JavaScript enabled. Please enable it to continue.

解决方法：

在data中添加字段

 publicPath: process.env.BASE_URL,

路径请求的位置修改请求为

          var loader0 = new GLTFLoader()
          loader0.load(`${this.publicPath}taizho/Monster/Monster.gltf`, function (gltf) {
            gltfgroup.add(gltf.scene)
          })

　重启服务，刷新页面，查看请求，数据正常加载。模型也成功加载

vue-cli3，vue-cli4使用three.js请求本地模型文件报错

推荐阅读