Vue.js 또는 Nuxt.js 중앙 집중식 앱 구성

Question

nuxt/vue 앱 내의 단일 위치에 내 정적 데이터를로드하려면 어떻게해야합니까?

이상적으로 나는 vuex에로드받을 수있는 모든 데이터를 들고 JSON 파일을 것 어디서나 액세스 할 것 ...

내가이 옵션을 제안했습니다,하지만 난 그들에게 깨끗한 찾을 수 없습니다. ..

• webpack 템플릿 (webpack-simple이 아닌)을 사용하는 경우에는 그 환경 변수 인 http://vuejs-templates.github.io/webpack/env.html을 사용할 수 있습니다.
• 다른 방법으로는 프로젝트 폴더에서 고정 데이터 (예 : export const API_URL = 'https:/my-api.com')를 저장하는 데 사용할 수있는 constants.js 파일을 만들 수 있습니다.

해당 파일에서 필요에 따라 데이터를 가져옵니다 (예 : import { API_URL } from 'path/to/constants').

Answer 1

나는 ~/global.json

에 당신의 JSON 파일을 만듭니다 ~/plugins/globals.js

import Vue from 'vue' 
import globals from '~/globals.json' 
import _ from 'lodash' 

Vue.prototype.$g = (key) => { 
    let val = _.get(globals, key, '') 
    if (!val) console.warn(key, ' is empty in $g') 
    return val || key 
} 

2)에서 작성)

1 Nuxt.js

와

따라서 플러그인을 VUE 프로토 타입을 사용하여 우아한 해결책을 찾았습니다

{ 
    "website_url": "https://www.company.com", 
    "social": { 
    "facebook": { 
     "url": "https://www.facebook.com/company" 
    }, 
    "twitter": { 
     "url": "https://www.twitter.com/company" 
    } 
    } 
} 

3) .vue 파일

<template> 
    <div> 
    <p>URL: {{ $g('website_url') }}</p> 
    <p>Facebook: {{ fburl }}</p> 
    <p><a :href="$g('social.twitter.url')">twitter</a></p> 
    </div> 
</template> 
<script> 
export default { 
    data() { 
    return { 
     fburl: this.$g('social.facebook.url') 
    } 
    } 
} 
</script>