如何访问组件中的vuejs Webpack配置变量？

Question

我正在使用该模式将配置变量存储在我的/config/[xxx].env.js文件中，如下所示：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API: {
    ROOT: "'http://blah.blah.blah'"
  },
  CONNECTORS: {
    SPOTIFY: {
      CLIENT_ID: "'blah'",
      SCOPES: "'blah'",
      REDIRECT_URI: "'blah'"
    }
  }
})

请注意，其中一些不是专门针对环境的变量，但是我想将这些类型的配置变量放在一个集中的位置。

在我的main.js中，我可以通过process.env很好地访问变量：

Vue.http.options.root = process.env.API.ROOT

但是在较低级别的组件中，不存在“过程”。

我知道不应该这样做，因为它不是全局定义的，但是我无法弄清楚如何从组件内部访问该process.env对象。 我知道我可以使其全球化，但这并不“正确”。

两个问题：

1. 还有其他一些Vue导入/对象是我缺少要进入process.env的吗？

2. 有没有更好的方法来存储这些类型的集中值，这些值可能取决于环境？ 我已经看过诸如ruby config gem之类的东西，它可以很好地在默认配置之上分层特定于环境的配置。

我确实尝试了npm config gem，但是由于某种原因，它缺少了其他必需的npms，并且似乎是针对node.js的，并且感觉好像我在不使用vue-cli webpack提供的功能做错了。

Answer 1

通常，使组件能够查看其他组件中的数据或在任何地方实际形成的公认的“行业标准”方法是使用VueX。 这与React中的Redux类似。 乍一看似乎有些复杂，但实际上很简单，VueX消除了任何给定组件如何查看任何给定数据的麻烦，并同时解决了许多其他问题。 试试看。

当然，另一种方式是在您的应用程序中实现一个实现“单一模式”的模块，以便任何代码都可以转储数据并取出数据。