在nuxt.config.js中使用环境变量

Question

我正在使用Nuxt & Axios，但是在从我的本地机器构建应用程序时，使用环境变量有困难。

为了解决这个问题，我安装了@nuxtjs/dotenv模块，但仍然存在问题。

注意:在我的托管提供商环境中构建应用程序时，环境变量可以很好地工作。给我带来麻烦的只是我当地机器上的建筑。我的IDE是VS Code。

下面是我在nuxt.config.js中的axios设置：

module.exports = {
  ...
  buildModules: [
    '@nuxtjs/dotenv'
  ],
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: process.env.BASE_URL
  },
  ...
}

我的.env文件有以下内容：

BASE_URL="https://some.api.com"

在构建应用程序时，无法识别.env变量：

nuxt build

相反，它只是将axios基url设置为相同的主机:默认情况下服务器运行的端口。例:本地主机:4000

我从@nuxtjs/dotenv模块找到了以下文档：https://github.com/nuxt-community/dotenv-module#using-env-file-in-nuxtconfigjs。这将指示您将以下内容添加到nuxt.config.js顶部：

require('dotenv').config()

这适用于本地构建；我来自.env的变量是被识别的！但是，由于dotenv是一个dev依赖项，这会导致构建在部署到我的托管提供商时崩溃，因为模块是不被识别的。

我知道我可以在build命令中直接定义环境变量，如下所示，但是我不喜欢这样做，

NUXT_ENV_BASE_URL=some.api.com nuxt build 

在构建过程中，是否有一种简单的方法可以让环境变量在nuxt.config.js中本地工作，并且在部署到生产时也能很好地工作呢？

谢谢!

Answer 1

2020年更新-09-26

从2.13.0开始，我已经删除了@nuxtjs/dotenv。我的nuxt.config.js现在只需在删除dotenv导入后如下所示。我没有做任何其他的代码更改，其余的函数对我来说完全一样。

env: {
  DB_HOST: process.env.DB_HOST
},

我的.env包含以下内容。

DB_HOST=http://localhost:5001/

原始答案

我将以下内容安装为一个dev依赖项：@nuxtjs/dotenv。然后，我将以下内容添加到我的nuxt.config.js中。我找到了这个导入语句在一篇文章，并尝试了它。谢天谢地它对我有用。

import dotenv from "dotenv";
dotenv.config();

env: {
  DB_HOST: process.env.DB_HOST
},

我创建了一个名为.env的文件，其内容如下

DB_HOST=http://localhost:5001/

Answer 2

在NuxtVersionv2.13.0中，添加了对Runtime Config的支持。这增加了对运行时读取环境变量的适当支持。以前，它们可以被读取，但被编译到应用程序中。

标准文档非常好：https://nuxtjs.org/guide/runtime-config/。还有一篇很棒的关于如何迁移的博客文章。您可以删除@nuxtjs/dotenv的使用。

https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

例如，在nuxt.config.js中定义。

  // Public env variables that are exposed on the frontend.
  publicRuntimeConfig: {
    someAccessKeyId: process.env.SOME_ACCESS_KEY_ID,
  },
  // Private env variables that are not be exposed on the frontend.
  privateRuntimeConfig: {},

然后在您的vue代码中，您可以通过。

const { someAccessKeyId } = this.$config