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

　重啟服務，刷新頁面，查看請求，數據正常加載。模型也成功加載