时间戳

首页 > 解决方案 > 如何从 .env 获取变量到 vue 文件中的道具？

laravel - 如何从 .env 获取变量到 vue 文件中的道具？

问题描述

如何将 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/ ”，而是返回“未定义”

标签： laravel

解决方案

例如，您可以在 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,
                 }
            }
        }
...

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

推荐阅读