[英]How to use dotenv with Vue.js
我正在尝试将一些环境变量添加到我的 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
使用这个变量
我试图在商店中 console.log 环境变量,但没有运气:
console.log(process.env)
但我得到的只是
NODE_ENV:"development"
我发现的唯一相关线程是将环境变量加载到 vue.js 中,但它只提到了如何使用process.env
现有变量。 我想使用 dotenv 添加环境变量。 为什么这段代码不起作用?
如果您的项目是使用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 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"
}
尝试删除等号周围的空格。
VUE_APP_GOODREADS_KEY=my_key
另外,尝试像这样调试:
const config = dotenv.config()
if(config.error){
console.log('Could not load env file', config.error)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.