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) })
重启服务,刷新页面,查看请求,数据正常加载。模型也成功加载