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) 在 ~/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

我找到了一种最简单的方法来设置配置 (json) 文件并在任何组件中使用。

步骤 -

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

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

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

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

使用 - 在任何组件或页面中 -

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

现在您可以在组件中的任何位置使用设置。

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

Vue.js or Nuxt.js centralized app configuration

vuejs2

vuex

nuxt.js