如何从.env中获取变量到vue文件中的props？

Question

如何将env变量值返回到vue文件中的props默认值？

这是我的.env

API_BASE_URL=http://192.168.1.101:1025/doctruyenserver/

这是我的vue文件代码：

<script>
export default {
    props: {
        dataUrl: {
            default: ''+process.env.VUE_APP_API_BASE_URL,
        }, 
    },
</script>

我所期待的是它会返回“ http://192.168.1.101:1025/doctruyenserver/ ”，而是返回“undefined”

Answer 1

作为一个例子，您可以在Vue App的根文件夹中创建.env.development和env.production文件，如，

  +-- node_modules
  +-- src
  +-- .env.development
  +-- .env.production
  +-- package.json

...

在.env.development和.env.production中，你需要声明以VUE_APP_开头的变量，

VUE_APP_API_BASE_URL=http://192.168.1.101:1025/doctruyenserver/

之后，您可以在Vue组件中使用变量，例如，

 export default {
        name: 'Component',
        data() {
            return {
                 dataUrl: {
                     default: ''+process.env.VUE_APP_API_BASE_URL,
                 }
            }
        }
...

你可以在这里查看官方文档