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设置为服务器默认运行的同一host：port。例如：localhost：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中。我找到了此导入语句in an article并尝试了它。幸运的是，它对我有用。

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

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

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

DB_HOST=http://localhost:5001/

Answer 2

在nuxt版本v2.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

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

2 个答案:

更新2020-09-26

原始答案