我正在使用 wbepack 编译一个 VUEJS 项目,在该项目中我将一个包含对象数组的 JSON 文件导入到 vueJS 中,但是当通过组件访问它时,该对象似乎为空。
import Jason from './some.json';
export defaults {
data(){ return { someArr: Jason } } }
我没有收到任何编译错误或任何其他报告的错误。
什么可能导致对象someArr
为空?
PS我能够通过AJAX成功加载json
我正在使用 wbepack 编译一个 VUEJS 项目,在该项目中我将一个包含对象数组的 JSON 文件导入到 vueJS 中,但是当通过组件访问它时,该对象似乎为空。
import Jason from './some.json';
export defaults {
data(){ return { someArr: Jason } } }
我没有收到任何编译错误或任何其他报告的错误。
什么可能导致对象someArr
为空?
PS我能够通过AJAX成功加载json
安装 json 加载器
npm install json-loader --save
然后在你的 webpack.config 文件中添加这个加载器
module: {
loaders: [
{
test: /\.json/,
loader: 'json',
}
],
}
转到 SCR 并找到一个名为 shims-vue.d.ts 的文件并添加一个像这样的 JSON 模块。
declare module '*.json'
{
const value: { [key: string]: any };
export default value;
}
可能只是一个错字,但你export default {
不是defaults
假设这不是问题,您是否在其中导出 JSON ./some.json
?IE
export default {
"foo": "bar",
...
}
我就是这样做的:
在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>
这应该有效:
var yourJSONData= JSON.parse(Jason);