如何在 Vue.js 中使用 dotenv
Posted
技术标签:
【中文标题】如何在 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 字符串提供服务的路由,以便浏览器可以获取并解析它
你能解释一下设置吗?我没有得到方法。以上是关于如何在 Vue.js 中使用 dotenv的主要内容,如果未能解决你的问题,请参考以下文章
如何在 create-react-app 中注入没有 REACT_APP 前缀的 dotenv 变量?