如何在 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 添加环境变量。为什么这段代码不起作用？

原文由 Dani Vijay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

1. 将 .env 文件放在项目根目录中。
2. 在 .env 文件中，使用“VUE_APP_”前缀指定环境变量。

VUE_APP_SOMEKEY=SOME_KEY_VALUE 。

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

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

参考： Vue CLI 3 - 环境变量和模式

原文由 white 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 Vue CLI 2 时，您必须使用位于 config 文件夹中的 dev.env.js 和 prod.env.js 文件。

Vue CLI 2 不支持使用 .env 文件，但是 Vue CLI 3 支持。

 // /config/prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  SERVER_URI: "http://someremoteuri:3333/api/v1"
}

 // /config/dev.env.js
'use strict'
module.exports = {
  NODE_ENV: '"development"',
  SERVER_URI: "http://localhost:3333/api/v1"
}

原文由 PrestonDocks 发布，翻译遵循 CC BY-SA 4.0 许可协议