Vue& Webpack:全球开发和生产变量

时间:2017-07-23 22:43:01

标签: javascript webpack vue.js

我使用vue-cli构建我的网络应用程序。我的应用程序在很多地方使用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>

有没有更好的方法来解决这个问题?

1 个答案:

答案 0 :(得分:3)

如果你正在使用vue-cli webpack模板,在config文件夹中你会看到两个文件:dev.env.js和prod.env.js。

这两个文件都包含一个在整个Vue应用程序中全局可用的对象:

<强> dev.env.js

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

<强> prod.env.js

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

请注意,字符串值需要嵌套的单引号和双引号。您可以像这样添加自己的变量:

<强> dev.env.js

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

<强> prod.env.js

process.env.API

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

target: :_blank