Vue cli - TypeError：无法读取未定义的属性“env”

Posted 2023-02-22

【中文标题】Vue cli - TypeError：无法读取未定义的属性“env”

【英文标题】：Vue cli - TypeError: Cannot read property 'env' of undefined

【发布时间】：2021-08-11 08:53:02

【问题描述】：

我正在尝试在我的 vue 应用程序中使用 process.env。我创建了两个.env 文件，一个用于生产.env.production，另一个用于开发.env.development。这两个文件位于我的 vue 项目的根目录中，但 vue cli 会忽略它们。我创建了一个环境变量，我在我的Home.vue 组件中调用它来为开发/生产设置不同的图像路径。问题是在构建之后，当我运行我的应用程序来测试它时，我会收到这个错误

TypeError: Cannot read property 'env' of undefined

它与我要加载的图像的src标签中设置的路径有关

<img class="img-fluid" :src="`$process.env.VUE_APP_PATH_START/img/background.jpg`">

我的.env 文件看起来像这样 开发环境文件

VUE_APP_PATH_START = ../assets/

生产环境文件

VUE_APP_PATH_START = /

我在构建中遇到此错误有什么原因以及如何修复它？

【参考方案1】：

尝试使用 require 函数将其定义为计算属性：

computed:
    background()
        return require("`$process.env.VUE_APP_PATH_START/img/background.jpg`")
  

模板：

 <img class="img-fluid" :src="background"/>