如何在 Vue.js 中使用 dotenv

Posted 2023-02-22

【中文标题】如何在 Vue.js 中使用 dotenv

【英文标题】：How to use dotenv with Vue.js

【发布时间】：2018-11-15 20:07:28

【问题描述】：

我正在尝试将一些环境变量添加到我的 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 添加环境变量。为什么这段代码不起作用？

【参考方案1】：

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

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

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

在.env 文件中，使用“VUE_APP_”前缀指定环境变量。

VUE_APP_SOMEKEY=SOME_KEY_VALUE.

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

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

参考：Vue CLI 3 - Environment Variables and Modes

【讨论】：

如果我想使用dotenv怎么办？

投了反对票，因为 op 专门将该问题标记为 vuejs2。已经有很多关于 Vue CLI 3 和 .env 的信息，但这是 vuejs2 的一个常见问题，没有明确的答案。

@PrestonDocks Vue CLI 3 !== Vue Js 3，Vue CLI 3 生成 Vue Js 2.x 代码，VueJS 3 是尚未发布的下一个 vue 版本。

【参考方案2】：

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

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

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

【讨论】：

Vue CLI 3 !== Vue Js 3，Vue CLI 3 生成 Vue Js 2.x 代码，VueJS 3 是下一个尚未发布的 vue 版本。

【参考方案3】：

尝试删除等号周围的空格。

VUE_APP_GOODREADS_KEY=my_key

另外，尝试像这样调试：

const config = dotenv.config()
if(config.error)
  console.log('Could not load env file', config.error)

参考：https://github.com/motdotla/dotenv#config

【讨论】：

看来我不能在客户端使用它，因为它会抛出错误fs not defined。

嗯，这是意料之中的。浏览器如何读取服务器上的任意文件？ fs 是一个内置节点。但是，您可以设置一个将配置作为 JSON 字符串提供服务的路由，以便浏览器可以获取并解析它

你能解释一下设置吗？我没有得到方法。