我试图在我的组件中使用环境变量。但是当我使用变量时,它开始工作,但随后它抛出一个错误。
Component.vue
website: 'testing-hard-reality'
代码在硬编码时工作得非常好,如上所示。如果使用环境变量而不是硬码,则会得到一个错误
.env.local
VUE_APP_WEB_SITE: 'testing-hard-reality'
在组件中,变量被用作:
website: process.env.VUE_APP_WEB_SITE
在我的控制台中,我得到的错误是
[Vue warn]: v-on处理程序错误:"错误:网站名称未设置">
请告诉我该怎么做。
在src文件夹的同一层创建一个文件
.env.development.local
用于本地工作
.env.production.local
用于生产
在文件中添加env变量
VUE_APP_MY_VARIABLE_NAME = my-value-here
VUE_APP_*
部分很重要,因为vue项目中的所有env变量都需要以这个前缀开头。
现在要访问这个值,执行:
process.env.VUE_APP_MY_VARIABLE_NAME
重要一步
当您修改.env
文件时,您必须停止服务器并重新启动它以获得环境更改。
我猜您正在使用vue-cli来构建您的vue项目。在vue-cli文档中,我找到了env的语法。本地将是
VUE_APP_WEB_SITE=testing-hard-reality
不是你的演示:VUE_APP_WEB_SITE: 'testing-hard-reality'
裁判:https://cli.vuejs.org/guide/mode-and-env.html环境变量