VueJ에 JSON Imports

VueJ에 JSON Imports

wbepack을 사용하여 VUEJS 프로젝트를 컴파일하고 있습니다.VUEJ 프로젝트에서는 오브젝트 배열이 있는 JSON 파일을 vueJ로 Import하지만 컴포넌트를 통해 액세스하면 오브젝트가 비어 있는 것처럼 보입니다.

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

컴파일 오류나 기타 보고된 오류는 발생하지 않습니다.

객체의 원인someArr비어있을까?

추신: 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? 즉,

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);

언급URL : https://stackoverflow.com/questions/40723995/import-json-into-vuejs