Question

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

这是我的.env文件的内容，该文件位于root（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"

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

Answer 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

Answer 2

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

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

Answer 3

使用Vuejs 2时，必须使用config文件夹中的dev.env.js和prod.env.js文件。

Vuejs 2不支持使用.env文件，但是Vuejs 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.js中使用dotenv

3 个答案: