如何在Vue.js中使用dotenv

Question

我正在尝试将一些环境变量添加到我的vue应用程序中.

这是我的.env文件的内容,放在root(外部src):

VUE_APP_GOODREADS_KEY = my_key

我在我的顶部添加了dot env的代码 main.js

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

Answer 1

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

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

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

2. 在.env文件中,使用"VUE_APP_"前缀指定环境变量.

   VUE_APP_SOMEKEY=SOME_KEY_VALUE.

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

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

Referance:Vue CLI 3 - 环境变量和模式

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