node.js - 在 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 是一个开发依赖项，因此在部署到我的托管服务提供商时会导致构建崩溃，因为无法识别该模块。

我知道我可以直接在构建命令中定义环境变量如下但是我不想这样做 :

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/

原始答案
我安装了以下作为开发依赖项； @nuxtjs/dotenv。然后我将以下内容添加到我的 nuxt.config.js 中。我找到了这个导入声明 in an article并尝试了。谢天谢地，它对我有用。

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

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

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

DB_HOST=http://localhost:5001/