Vue.js 또는 Nuxt.js 일원화된 애플리케이션 구성

Vue.js 또는 Nuxt.js 일원화된 애플리케이션 구성

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

vuex에 로드되어 어디서나 액세스할 수 있는 모든 데이터를 저장하는 JSON 파일이 이상적입니다.

두 가지 선택지를 제안받았지만 깨끗하지 못한 것 같아요

• webpack 템플릿(webpack-template가 아님)을 사용하는 경우 환경변수 http://vuejs-templates.github.io/webpack/env.html 를 사용할 수 있습니다.
• 또는 정적 데이터를 저장하는 데 사용하는 몇 가지 파일(예: constants.js)을 프로젝트 폴더에 언제든지 만들 수 있습니다.export const API_URL = 'https:/my-api.com').

필요에 따라서, 그 파일로부터 데이터를 Import 합니다(예:import { API_URL } from 'path/to/constants').

vue 프로토타입을 사용하여 우아한 솔루션을 찾았습니다.

따라서 Nuxt.js에서는

1) 플러그인 작성:~/plugins/globals.js

import Vue from 'vue'
import globals from '~/globals.json'
import _get from 'lodash/get'

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

2) json 파일을 만듭니다.~/global.json

{
  "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>

구성(json) 파일을 설정하고 모든 컴포넌트에서 사용할 수 있는 가장 쉬운 방법을 찾았습니다.

순서 -

1. 만들다setting.json파일을 root 디렉토리에 저장합니다.
2. 미들웨어에서 파일 settings.displays(또는 이름 유지)를 만들고 이 코드를 붙여넣습니다.

    import settings from '../settings.json'
    export default function ({ store, route, redirect, req}) {
        process.env = settings
    }

3 in nuxt.config.dll - 에서 설정을 추가합니다.

     router: {
            middleware: ['users', 'settings']
      },

- 컴포넌트 또는 페이지에서 사용 -

data(){
      return {
            settings: process.env
      }
},

이제 컴포넌트 내의 임의의 장소에서 설정을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/47395632/vue-js-or-nuxt-js-centralized-app-configuration