Vue cli - 类型错误：无法读取未定义的属性“env”

Question

我正在尝试在我的 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 = /

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

Answer 1

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

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

模板 ：

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