Webpack 无法加载 json 文件，如何定位本地 json 文件并使用 http.get 和 AngularJS 加载该文件答案

【问题标题】：Webpack can't load the json file, how to locate the local json file and load that using http.get with AngularJSWebpack 无法加载 json 文件，如何定位本地 json 文件并使用 http.get 和 AngularJS 加载该文件
【发布时间】：2017-02-25 03:14:10
【问题描述】：

我正在使用 AngularJs 的 ES6 语法，我正在尝试从 ApiService.js 加载本地的 theme.json 文件

  getThemesOptions() {
    this.$http.get('src/app-builder/p3-modal/themes.json')
    .success(function(data) {
      console.log(data);
    })
    .error(function() {

    });

我的文件结构：

src/
  app-builder/
    p3-modal/
      themes.json
  service/
    apiService/
       apiService.js

从控制台看，好像找到文件成功了，但是输出很奇怪，

因为themes.json 看起来像这样：

我正在使用Webpack运行应用程序，访问应用程序的url通常不是localhost，而是http://10.98.142.233:8080/o2/search/ab，不知道是什么原因造成的问题

请告诉我如何正确地从本地加载 json 文件，使用 AngularJs ES6 和 webpack。

谢谢！

这是网络标签。

【问题讨论】：

标签： javascript angularjs json ecmascript-6 webpack

【解决方案1】：

不，实际上发生的情况是它无法找到 JSON 文件，并且 Webpack 开发服务器将 404 路由回您的 index.html，这就是您在控制台中看到的内容.触发成功回调是因为从技术上讲，它不是 404 而是 200 OK。

只要 Webpack 开发服务器从 src 文件夹正上方的目录中提供内容，您所做的就应该有效。我猜可能不是这样。

【讨论】：

请指教在这种情况下如何获取themes.json文件.....卡了几个小时，我按照你之前的建议尝试过，放在根文件夹中，它不起作用.
检查开发人员工具中的网络选项卡以查看对 JSON 文件的请求。它可能会提供一些线索。另外，请确保 src 文件夹实际上位于您的应用程序根目录中，或者如果不是这种情况，请使用 Webpack 开发服务器的 --content-base 选项来使用不同的文件夹。
正确设置 contentbase 解决了我的问题。` devServer: { contentBase: "./src" }`

【解决方案2】：

您的浏览器位置是 www.google.com/image，然后当您调用 ajax 时，请求的 url 是 www.google.com/image/${url} 但如果在您的 url 前加上一个斜杠，就像 /src/app.. 并且它会请求的 url 就像www.google.com/${url}

【讨论】：