使用NUXT.js从资产中的JSON文件加载数据

Question

假设assets/data/geo/regions.json我的NUXT.js项目文件夹结构中包含文件。如何将数据从该文件读取到我的项目中？

我已经尝试过axios，但是我不知道该文件将使用哪个URL，我已经尝试了所有可能的URL。有什么更好的解决方案？也许将JSON文件保存在static文件夹中更好？

谢谢！

Answer 1

您可以导入 JSON 文件并直接在组件中import data from 'data.json'使用该属性。data

Answer 2

您可以使用Nuxt Content来实现：

使用 @nuxt/content 模块为您的 NuxtJS 应用程序提供支持：写入 content/ 目录并通过类似 MongoDB 的 API 获取 Markdown、JSON、YAML、XML 和 CSV 文件，充当基于 Git 的 Headless CMS。

基础知识就像下面一行一样简单。这将加载regions.json文件，解析它，并将其内容存储在content变量中。有关详细信息，请参阅 Nuxt Content 的文档。

const content = await this.$content('regions').fetch()

或者，您可以阅读我们关于使用 Nuxt 内容与 JSON 文件的博客文章。它描述了如何使用 JSON 内容扩展现有页面，以及如何基于它动态生成页面。

_{免责声明：我在 FrontAid CMS 工作。}

Answer 3

如果regions.json文件不会更改，则可以轻松地将其放在static文件夹中。然后该网址将是在nuxt问题页面上/data/geo/regions.json 查看此问题

将我的JSON文件移至“ static /”文件夹，并使用__axios__加载了它们。这个答案的链接很有用。谢谢！ (2认同)
@ngeloRigo你可以试试这个：`import json from "~/static/json/sample.json";`。通过在前面添加 `~/static` (2认同)

Answer 4

如果您计划在循环中加载数据，您可能需要使用“require”而不是“import”。

jsons = ["json_one","json_two"]
jsons_readed = []

// In the loop
file = require(`./assets/data/geo/${jsons[i]}`)
jsons_readed.push(file)

那么我认为你可以使用 jsons_readed 来访问对象。