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)
          })

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