如何在aurelia框架中从JSON文件获取数据？

我试图使用从外部JSON文件获取数据，但它给出了404NotFound错误

我已经尝试实施官方文件建议的基本设置

这是我的密码：

import {HttpClient } from 'aurelia-fetch-client';

let httpClient = new HttpClient();
export class ChangeRequest {
constructor(){
  httpClient.fetch('sample.json')
    .then(response => response.json())
    .then(res => {
      console.log(res);
 }
}
}

我应该得到JSON数据的结果，但我得到以下错误：

这是我的文件夹结构，它是使用

aurelia cli

---

如您所见，

sample.json

位于

src

文件夹中，我尝试将其放入

src/Assets

文件夹中，但结果相同。

它给出404的原因是开发web服务器没有该文件，您可以看到它试图从何处获取文件：

http://localhost:8080/sample.json

---

您可以做的是确保它进入您的dev服务器，可能是将它与您的资产（如图像）放在同一个文件夹中。如果您使用的是aurelia cli，也许您也可以将其放入

dist

文件夹中。

它提供404的原因是开发web服务器没有该文件，您可以看到它试图从何处获取该文件：

http://localhost:8080/sample.json

---

您可以做的是确保它进入您的dev服务器，可能是将它与您的资产（如图像）放在同一个文件夹中。如果您使用的是aurelia cli，也许您也可以将其放入

dist

文件夹中。

如果您使用的是Webpack，您有两种选择：

• 将文件保存在

  src

  目录中，并使用

  require

  语句加载它
• 将文件移动到

  static

  文件夹，并使用

  fetch

  加载它

以下是一个示例的屏幕截图，其中包含以下两个方面：

和源代码：

export class App {
  async attached() {
    const importedData = require('./in-src.json');

    const fetchedData = await fetch('in-static.json')
      .then(response => response.json());

    console.log('JSON loaded via import', importedData);
    console.log('JSON loaded via fetch', fetchedData);
  }
}

最后，应用程序运行时的控制台：

---

鉴于您正在使用Webpack，您有两种选择：

• 将文件保存在

  src

  目录中，并使用

  require

  语句加载它
• 将文件移动到

  static

  文件夹，并使用

  fetch

  加载它

以下是一个示例的屏幕截图，其中包含以下两个方面：

和源代码：

export class App {
  async attached() {
    const importedData = require('./in-src.json');

    const fetchedData = await fetch('in-static.json')
      .then(response => response.json());

    console.log('JSON loaded via import', importedData);
    console.log('JSON loaded via fetch', fetchedData);
  }
}

最后，应用程序运行时的控制台：

---

将它放在

dist

文件夹中按预期工作，但如果我执行

au build--env prod

，则整个dist文件夹将被替换，json文件将消失，可能需要在

webpack.config.js

中配置此文件，以便自动复制它，完成后我会回来的。将它放在

dist

文件夹中按预期工作，但如果我执行

au build--env prod

，则整个dist文件夹将被替换，json文件将消失，可能需要在

webpack.config.js

中配置此文件，以便自动复制，完成后我会回来的。关于把这个放进文件里，这不是奥雷莉亚特有的事情。这是一个网页包的概念。即使理解不能从src目录获取文件也是一个Webpack概念，而不是Aurelia概念。那么为什么文档中存在其他与Aurelia无关的通用语法呢？Docs说要使用aurelia fetch client插件，但您的解决方案没有使用它，那么我首先应该如何将它放在静态文件夹中呢？应该在文件中提到。其他框架都解释了从外部json加载。现在我明白了为什么这个框架不流行了。堆栈溢出是一个很好的地方，可以帮助您解决在开发新软件时遇到的问题。这不是一个发表贬损评论的地方。您在这里和GitHub上都收到了来自三名Aurelia核心团队成员的免费技术支持（您明确忽略了问题模板中的说明）。您提出的问题格式不正确，因为它没有提供足够的信息来回答您的问题（我必须阅读您对答案的评论，才能意识到您正在使用带有Aurelia CLI的Webpack）。。。（续）\（续）在获得免费支持后，即使您忽略了支持说明，您还是选择贬低我们的文档和框架本身。由志愿者开发的免费提供给您的框架。想一想你的评论听起来有多好，并认为像你的评论这样的评论是驱动开发者远离开源开发的一种评论。下一次，也许可以考虑不发表这样的评论。关于把这个放到文档中，这并不是奥雷利亚特有的事情。这是一个网页包的概念。即使理解不能从src目录获取文件也是一个Webpack概念，而不是Aurelia概念。那么为什么文档中存在其他与Aurelia无关的通用语法呢？Docs说要使用aurelia fetch client插件，但您的解决方案没有使用它，那么我首先应该如何将它放在静态文件夹中呢？应该在文件中提到。其他框架都解释了从外部json加载。现在我明白了为什么这个框架不流行了。堆栈溢出是一个很好的地方，可以帮助您解决在开发新软件时遇到的问题。这不是一个发表贬损评论的地方。您在这里和GitHub上都收到了来自三名Aurelia核心团队成员的免费技术支持（您明确忽略了问题模板中的说明）。您提出的问题格式不正确，因为它没有提供足够的信息来回答您的问题（我必须阅读您对答案的评论，才能意识到您正在使用带有Aurelia CLI的Webpack）。。。（续）\（续）在获得免费支持后，即使您忽略了支持说明，您还是选择贬低我们的文档和框架本身。由志愿者开发的免费提供给您的框架。想一想你的评论听起来有多合适，