Javascript vuejs使用fetch Api获取projects.json的数据：json中位置0处的意外标记

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

项目架构：

在created方法中，我们获取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>

---

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

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

您是否正在运行带有npm运行服务的默认vue cli环境？如果是这样，您可以在assets目录中添加一个json文件，这应该是正常的，并且可以在/assets/{insert the rest of the path here}处获取它

编辑

---

假设您在assets目录中有projects.json，就像您在评论中提到的那样，您应该能够使用fetch/assets/projects.json访问它。对，它应该位于assets目录中。要做到这一点，我可能会使用一个符号链接。也许我不应该使用package.json作为示例，但我最初使用的是assets/projects.json，出现了相同的错误。当直接访问url时，您会得到什么？类似localhost:3000/assets/projects.json的东西？@Vanz根据您的建议添加到了我的答案中comment@red-X当我访问localhost:8080/assets/projects.json时，没有显示任何内容它没有返回json，请删除.thenres=>res.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": [
    {
      "id": 1,
      "title": "pie station"
    },
    {
      "id": 1,
      "title": "automate dryer"
    }
  ],
  "profile": {
    "name": "someaone"
  }
}