Vue.js或Nuxt.js集中应用配置

Question

我如何能nuxt / VUE应用程序内加载静态数据在一个位置？

理想的情况是我想有一个JSON文件来保存所有的数据，其将得到装入vuex和将任何地方访问...

我一直建议2个选择，但我不觉得他们干净。

• 当使用的WebPack模板（没有的WebPack-简单），你可以使用环境变量为：http://vuejs-templates.github.io/webpack/env.html。
• 另外，你永远可以创造出一些文件 - constants.js - 在项目文件夹，您可以使用它存储静态数据（例如export const API_URL = 'https:/my-api.com'）的任何地方。

从该文件导入数据的任何地方，你需要它（例如import { API_URL } from 'path/to/constants'）。

Answer 1

我发现使用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）创建于~/global.json您的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>

Answer 2

我找到了一个最简单的方法来设置CONFIGS（JSON）文件，并且在任何组件中使用。

脚步 -

1. 创建根目录setting.json文件。
2. 在中间件，创建一个文件settings.js（或保留任何名称）并粘贴此代码

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

3 nuxt.config.js - 添加设置在

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

使用 - 在任何部件或页面 -

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

现在你可以在任何地方组件使用的设置。