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

Question

如何在 nuxt/vue 应用程序中的单个位置加载我的静态数据？

理想情况下，我会有一个 JSON 文件保存所有这些数据，这些数据将被加载到 vuex 中，并且可以在任何地方访问......

有人建议我有 2 个选项，但我觉得它们不干净......

• 当使用 webpack 模板（不是 webpack-simple）时，你可以使用环境变量：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）在以下位置创建您的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>