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

Question

假设我在我的NUXT.js项目文件结构中有一个assets/data/geo/regions.json文件。 我该如何将此文件中的数据读取到我的项目中？

我尝试过使用axios，但是我不知道这个文件的URL是什么，我尝试了所有可能的URL。 有没有更好的解决方案？ 或许最好将JSON文件保留在static文件夹中？

谢谢！

- Dmytro Zarezenko

Answer 1

如果 regions.json 文件不会改变，你可以将其放在 static 文件夹中。那么 URL 将会是 /data/geo/regions.json。 参见 nuxt 问题页面上的这个问题：https://github.com/nuxt/nuxt.js/issues/123

- Muhamed Ahmatović

---

我将我的 JSON 文件移动到 static/ 文件夹，并使用 axios 载入它们。这个答案中的链接很有用。谢谢！ - Dmytro Zarezenko

请问 @Dmytro Zarezenko 能否分享您的解决方案？我尝试了一下，但出现了错误：模块未找到：错误：无法解析 'fs'。 - Ângelo Rigo

@ÂngeloRigo 你可以尝试这样做：import json from "~/static/json/sample.json";。通过在前面加上~/static。 - Asef Hossini

Answer 2

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

- Nartub

---

好的，但如果文件名是动态的，而我想在循环中加载多个文件怎么办？ - Dmytro Zarezenko

当您将JSON放置在@/store中时，这种方法非常有效。 - hkong

@DmytroZarezenko 你需要使用动态导入来实现这个。 - Dapo Michaels

在资产文件夹中存储某些内容时，这个方法非常完美：import data from '~/assets/countries_states.json'。 - Cyrois

在assets文件夹中存储东西的操作完美无缺，import data from '~/assets/countries_states.json' - undefined

Answer 3

你可以使用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()

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

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

- str

---

我已经按照文档中给出的示例尝试了nuxt content。它可以使用该示例正常工作，但是如果您仅更改属性名称，则无法获得文档中的示例。因此，当我阅读所有内容时，我有点假设您可以将任何带有任何属性的json提供给Content，并在组件中获得结果...但不是这样的。 - xav

可以的。您应该提出一个新问题并添加细节。 - str

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来访问对象。

- Mehmet Ali