我如何才能从.env到vue文件中的props的变量？

Question

如何在vue文件中将env变量值返回为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/”，但返回“未定义”

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,
                 }
            }
        }
...

您可以查看官方文档here