javascript - vuejs使用fetch Api获取projects.json : Unexpected token < in JSON at position 0的数据

Question

这个问题已经有答案了:

"SyntaxError: Unexpected token < in JSON at position 0" (40 个回答)

已关闭 3 年前。

我正在练习fetch Api，并尝试在我的vue-cli项目中获取projects.json文件的数据并将其显示在控制台.

项目架构:

src/views/Projects.vue
src/assets/projects.json

Projects.vue 在创建的方法中我们获取 json 数据

<template>
  <div>
    <h1>Hello WOrld</h1>
  </div>
</template>

<script>
export default {
  name: "projects",
  created() {
    fetch("../assets/projects.json")
      .then(res => res.json())
      .then(data => {
        console.log(data);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

加载组件时显示语法错误。

SyntaxError: Unexpected token < in JSON at position 0

projects.json 仅包含基础知识

    {
  "projects": [
    {
      "id": 1,
      "title": "pie station"
    },
    {
      "id": 1,
      "title": "automate dryer"
    }
  ],
  "profile": {
    "name": "someaone"
  }
}

如何使用 fetch Api 在控制台中显示 .json 文件的内容？

Answer 1

在控制台中查找网络选项卡，您可能会注意到您的 fetch 调用返回了 404 html 页面。服务器很可能不提供 package.json，但这取决于您的设置。 (无论如何你通常都不想提供它)

您是否使用 npm runserve 运行默认的 vue cli 环境？如果是这样，您可以在 Assets 目录中添加一个 json 文件，这应该可以正常提供，并且可以在/assets/{在此处插入路径的其余部分} 获取它。

编辑

假设您在 Assets 目录中有projects.json，就像您在评论中提到的那样，您应该能够使用 fetch("/assets/projects.json") 访问它