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

【问题标题】：Vue cli - TypeError: Cannot read property 'env' of undefinedVue cli - TypeError：无法读取未定义的属性“env”
【发布时间】：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 = /

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

【问题讨论】：

标签： vue.js environment-variables vue-cli dotenv

【解决方案1】：

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

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

模板：

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

【讨论】：