我使用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>
有没有更好的方法来解决这个问题?
答案 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