Vue cli - TypeError: Cannot read property 'env' of undefined

Question

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

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"/>

Vue cli - TypeError: Cannot read property 'env' of undefined

Vue cli - TypeError: Cannot read property 'env' of undefined

vue.js

environment-variables

vue-cli

dotenv