无法读取VueJS中的环境变量

本文介绍了无法读取VueJS中的环境变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试在组件中使用环境变量.但是，当我使用该变量时，它最初可以工作，但随后会引发错误.

I am trying to use the environment variable in my component. But it works initially when i use the variable, but then it throws an error.

Component.vue

website: 'testing-hard-reality'

如上所示，对代码进行硬编码后绝对可以正常工作.如果使用环境变量而不是硬代码，我会报错

The code works absolutely fine when it is hardcoded, shown above. If the environment variable is used rather the hardcode i get an error

.env.local

VUE_APP_WEB_SITE: 'testing-hard-reality'

该组件中的变量用作:

website: process.env.VUE_APP_WEB_SITE

在我的控制台中，我收到错误消息

In my console i am getting the error as

[Vue警告]:v-on处理程序中的错误:错误:未设置网站名称"

[Vue warn]: Error in v-on handler: "Error: WebSite name is not set"

请告诉我该怎么做.

推荐答案

在src文件夹的同一级别中创建文件

Create in the same level of src folder a file

.env.development.local 用于本地工作

.env.production.local 用于生产

在文件中添加环境变量

VUE_APP_MY_VARIABLE_NAME = my-value-here

VUE_APP _ * 部分很重要，因为vue项目中的所有env变量都必须以该前缀开头.

VUE_APP_* part is important because all env variables in vue project needs to start with this prefix.

现在可以访问此值了:

process.env.VUE_APP_MY_VARIABLE_NAME

重要步骤

每当修改 .env 文件时，都必须停止服务器并重新启动服务器以获取环境更改.

Whenever you modify the .env files you have to stop your server and start it again in order to get the env changes.