SyntaxError: Unexpected token ‘＜‘, “＜!DOCTYPE “... is not valid JSON at JSON.parse (＜anonymous＞)

我的2009

已于 2024-03-25 15:22:22 修改

阅读量5k

点赞数 9

文章标签： json 前端 vue.js

于 2024-03-20 17:16:04 首次发布

本文链接：https://blog.csdn.net/qq_33298964/article/details/136882324

版权

文章讲述了在Vue项目中使用GLTFLoader加载模型时遇到的SyntaxError，解决方法是确保模型文件路径为绝对路径或将其放置在public文件夹下，并正确处理JSON解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中导入模型时报错如下：

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at JSON.parse (<anonymous>)
at GLTFLoader.parse

代码写法如下：

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

// 添加模型
const gltfLoader = new GLTFLoader();
gltfLoader.load("../../assets/models/rabbit.glb", (gltf) => {
        let model = gltf.scene;
        console.log("model",model)
        scene.add(model);
})

通过测试发现是模型文件路径问题，模型文件路径需采用绝对路径，即"src/assets/models/rabbit.glb"，改成如下引入报错解决

// 添加模型
const gltfLoader = new GLTFLoader();
gltfLoader.load("src/assets/models/rabbit.glb", (gltf) => {
        let model = gltf.scene;
        console.log("model",model)
        scene.add(model);
})

或是将模型文件放在public文件夹下，路径改为"./models/rabbit.glb"，如下

// 添加模型
const gltfLoader = new GLTFLoader();
gltfLoader.load("./models/rabbit.glb", (gltf) => {
        let model = gltf.scene;
        console.log("model",model)
        scene.add(model);
})

使用绝对路径可以确保引入的是实际文件系统上的模型文件，避免在打包后文件找不到。