node.js - 如何在 Vue.js 中使用 dotenv

Question

我正在尝试将一些环境变量添加到我的 vue 应用程序中。

这是我的 .env 文件的内容，它位于根目录下(在 src 之外):

VUE_APP_GOODREADS_KEY = my_key

我在 main.js

的顶部添加了 dot env 的代码

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import Vuetify from 'vuetify'

import dotenv from 'dotenv'

dotenv.config()

import { router } from './router'
import store from './store'

我想在我的商店 ./store/index.js 中使用这个变量

我尝试在 store 中使用 console.log 环境变量，但没有成功:

console.log(process.env)

但我得到的只是

NODE_ENV:"development"

我找到的唯一相关主题是 Load environment variables into vue.js , 但它只提到如何使用 process.env 中的现有变量。我想使用 dotenv 添加环境变量。为什么这段代码不起作用？

Answer 1

如果您的项目是使用 Vue CLI 3 创建的，则无需使用 dotenv 获取环境变量。

在项目的 .env 文件中获取环境变量:

1. 将 .env 文件放在您的项目根目录中。

2. 在.env文件中，指定带有“VUE_APP_”前缀的环境变量。

   VUE_APP_SOMEKEY=SOME_KEY_VALUE。

3. 最后，您可以在应用程序代码中使用 process.env.* 访问它们。

   console.log(process.env.VUE_APP_SOMEKEY)//SOME_KEY_VALUE

引用:Vue CLI 3 - Environment Variables and Modes