Vue和Webpack：全球開發和生產變量

Question

我正在使用vue-cli構建我的Web應用程序。 我的應用程序在許多地方都使用了api，如下所示：

axios.post(API + '/sign-up', data).then(res => {
  // do stuff
});

API變量是一個包含地址開頭的常量，例如https://example.com 。

我將如何檢測這是dev還是prod版本，並相應地設置該變量？ 現在，我在index.html文檔中有一個腳本標簽，並且正在為dev和prod手動更改它：

<script>var API = 'https://example.com'</script>

有沒有更好的方法來解決這個問題？

Answer 1

如果您使用的是vue-cli Webpack模板，則在config文件夾中，您將看到兩個文件：dev.env.js和prod.env.js。

這兩個文件都包含一個在整個Vue應用程序中全局可用的對象：

dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

prod.env.js

module.exports = {
  NODE_ENV: '"production"'
}

請注意，字符串值需要嵌套的單引號和雙引號。 您可以像這樣添加自己的變量：

dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API: '"http://localhost:8000"'
})

prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  API: '"https://api.example.com"'
}

現在，可以從process.env對象的任何Vue方法中訪問該變量：

process.env.API