将JSON导入VueJS

时间:2016-11-21 15:43:28

标签: webpack vue.js vue-component vuejs2

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

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

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

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

P.S。我能够通过AJAX成功加载json

5 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

使用

安装json loader
npm install json-loader --save

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

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

答案 2 :(得分:1)

这是我的方法:

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 :(得分:0)

这应该有效:

var yourJSONData= JSON.parse(Jason);

答案 4 :(得分:0)

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

假设这不是问题,您是否在./some.json内导出JSON?即。

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