将 JSON 导入 VueJS答案

【问题标题】：Import JSON into VueJS将 JSON 导入 VueJS
【发布时间】：2017-04-05 01:46:22
【问题描述】：

我正在使用 wbepack 编译一个 VUEJS 项目，在该项目中我将一个包含对象数组的 JSON 文件导入到 vueJS 中，但是当通过组件访问它时，该对象似乎是空的。

import Jason from './some.json';
export defaults {
data(){ return { someArr: Jason } } }

我没有收到任何编译错误或任何其他报告的错误。

什么可能导致对象someArr 为空？

附注我能够通过 AJAX 成功加载 json

【问题讨论】：

标签： webpack vue.js vue-component vuejs2

【解决方案1】：

转到 SCR 并找到一个名为 shims-vue.d.ts 的文件并添加一个这样的 JSON 模块。

    declare module '*.json' 
{
  const value: { [key: string]: any };
  export default value;
}

【讨论】：

【解决方案2】：

这就是我的做法：

在 main.js 中：

import Conf from './static/app-conf.json';
Vue.prototype.$appConfig = Conf;

现在我可以在任何需要的地方使用该 JSON 文件，方法是将其添加到数据中：

    <template>
      <div>{{someText}}</div>
    </template>
    <script>        
        export default {
                name: 'Something',
                components: {},
                props: {},
                data: () => ({
                    someText: Vue.prototype.$appConfig.someText,
                }),
                computed: {},
                methods: {}
            };
    </script>

【讨论】：

【解决方案3】：

可能只是一个错字，但你 export default { 不是 defaults

假设这不是问题，您是否在./some.json 中导出 JSON？即

export default {
  "foo": "bar",
  ...
}

【讨论】：

【解决方案4】：

使用

安装 json 加载器

npm install json-loader --save

然后在你的 webpack.config 文件中添加这个加载器

module: {
    loaders: [
        {
            test: /\.json/,
            loader: 'json',
        }
    ],
}

【讨论】：

"由于 webpack >= v2.0.0，默认情况下可以导入 JSON 文件。如果您使用自定义文件扩展名，您可能仍希望使用它。请参阅 v1.0.0 - > v2.0.0 迁移指南了解更多信息” 摘自Webpack Documentation。
注意，由于 Webpack 4，loaders 现在是 rules。

【解决方案5】：

这应该可行：

var yourJSONData= JSON.parse(Jason);

【讨论】：