如何訪問組件中的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消除了任何給定組件如何查看任何給定數據的麻煩，並同時解決了許多其他問題。 試試看。

當然，另一種方式是在您的應用程序中實現一個實現“單一模式”的模塊，以便任何代碼都可以轉儲數據並取出數據。