Javascript 意外标记<；在JSON中的位置0 vuejs

我一直在寻找如何解决这个错误，但我不太清楚如何修复它

我正在与lottie web合作进行一个项目，我必须在对象上设置动画的参数，以便稍后将其作为参数传递

我的组成部分：

import Lottie from './../../node_modules/lottie-web/build/player/lottie';

export default {
  name: 'Illustration',
  mounted() {
    this.animationParams = {
      container: document.getElementById('animation'),
      renderer: 'svg',
      loop: 'true',
      autoplay: 'false',
      path: '/src/data/animation.json',
    };
    Lottie.loadAnimation(this.animationParams);
  },
  data() {
    return {
      animationParams: {
      },
    };
  },

但当执行这一行时：

    Lottie.loadAnimation(this.animationParams);

我得到这个错误：

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHttpRequest.xhr.onreadystatechange

Uncaught SyntaxError:JSON中位置0处的意外标记<
在JSON.parse（

如何在不解析的情况下加载该json文件？
您的服务器不太可能提供
/src/data/animation.json
。使用
animationData
而不是
路径，直接设置动画对象（而不是通过服务器调用）

首先，我将动画数据设置为常规ES6模块，该模块导出一个对象而不是json

/src/data/animation.js

export default {
  // your animation data
}

请注意，它是一个javascript文件，而不是json文件。然后在您的组件中，只需导入对象

import Lottie from './../../node_modules/lottie-web/build/player/lottie';
import animationData from "/src/data/animation"

export default {
  name: 'Illustration',
  mounted() {
    this.animationParams = {
      container: document.getElementById('animation'),
      renderer: 'svg',
      loop: 'true',
      autoplay: 'false',
      animationData,
    };
    Lottie.loadAnimation(this.animationParams);
  },
  data() {
    return {
      animationParams: {
      },
    };
  },

这是有案可查的

这将使您的初始包变大，但您不必再为动画数据调用服务器

除此之外，您需要将
animation.json
移动到服务器提供服务的某个路径，并将
path
设置为相对于当前加载页面的url。
查看浏览器devtools的“网络”选项卡。您可能没有得到json，而是html。好吧，我检查了它，情况并非如此：/@CarlosPisarello可能在您的服务器上找不到指定的路径（
/src/data/animation.json
），这可能被设置为重定向到404页面（即HTML），无法解析为JSON。我会在DevTools中仔细检查该路径对应的网络响应。您是否可以共享来自chrome developer tools的网络调用的屏幕截图以及该网络调用的响应？@tony19的评论在这一点上是有意义的。当然！@highhope这里是：文件Is Cuentas.json（为了更好地理解这个问题，我在帖子中将它改为animation.json）