关于node.js：如何在Vue.js中使用dotenv


How to use dotenv with Vue.js

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

这是我的.env文件的内容，该文件位于根目录(src之外)上：

1
VUE_APP_GOODREADS_KEY = my_key

，我在main.js

的顶部添加了点env的代码

1
2
3
4
5
6
7
8
9
10
11
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环境变量，但没有运气：

1
console.log(process.env)

但是我得到的只是

1
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 3-环境变量和模式

    相关讨论

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

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

    1
    2
    3
    4
    5
    6
    // /config/prod.env.js
    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      SERVER_URI:"http://someremoteuri:3333/api/v1"
    }
    1
    2
    3
    4
    5
    6
    // /config/dev.env.js
    'use strict'
    module.exports = {
      NODE_ENV: '"development"',
      SERVER_URI:"http://localhost:3333/api/v1"
    }
    相关讨论

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

    1
    VUE_APP_GOODREADS_KEY=my_key

    此外，尝试像这样调试：

    1
    2
    3
    4
    const config = dotenv.config()
    if(config.error){
      console.log('Could not load env file', config.error)
    }

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

    相关讨论