javascript - Vue 和 Webpack : Global development and production variables

Question

我正在使用 vue-cli 构建我的网络应用程序。我的应用程序在很多地方使用了一个 api，如下所示:

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

API 变量是一个包含地址开头的常量，例如，https://example.com。

我如何检测这是开发版本还是产品版本并相应地设置该变量？现在，我的 index.html 文档中有一个脚本标签，我正在为开发和生产手动更改它:

<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"'
}

现在可以在任何 Vue 方法中从 process.env 对象访问该变量:

process.env.API