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

【问题标题】：Load data from JSON file in assets with NUXT.js使用 NUXT.js 从资产中的 JSON 文件加载数据
【发布时间】：2019-08-03 02:43:55
【问题描述】：

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

我已经尝试过 axios 但我不知道哪个 URL 会包含这个文件，我已经尝试了所有可能的 URL。有什么更好的解决方案来做到这一点？将 JSON 文件保存在 static 文件夹中可能更好？

谢谢！

【问题讨论】：

【解决方案1】：

如果regions.json 文件不会更改，您可以轻松地将其放入static 文件夹中。那么网址将是/data/geo/regions.json 看到这个问题on the nuxt issues page

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果您计划在循环中加载数据，您可能希望使用“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来访问对象了。

【讨论】：

【解决方案4】：

您可以为此使用Nuxt Content：

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

基础很简单，如下一行。这将加载 region.json 文件，对其进行解析，并将其内容存储在 content 变量中。有关详细信息，请参阅 Nuxt Content 的文档。

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

您也可以阅读我们的博客文章 Using Nuxt Content with a JSON File。它描述了如何使用 JSON 内容扩展现有页面，以及如何基于它动态生成页面。

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

【讨论】：

我已经使用文档中给出的示例尝试了 nuxt 内容。它适用于示例，但是，如果您仅将属性名称更改为其他内容，然后是文档中的示例，您将一无所获。因此，当我阅读所有这些内容时，我有点假设您可以将具有任何属性的任何 json 提供给 Content 并在您的组件中获取结果......但不是。
是的，你可以。您应该提出一个新问题并添加详细信息。