在 nuxt.config.js 中使用环境变量 [英] Using Environment Variables in nuxt.config.js

问题描述

我正在使用 Nuxt &Axios 但在从我的本地机器构建应用程序时使用环境变量时遇到问题.

I'm using Nuxt & Axios but having trouble using environment variables when building the application from my local machine.

我已经安装了@nuxtjs/dotenv 模块试图解决这个问题，但仍然有问题.

I have installed the @nuxtjs/dotenv module in an attempt to fix this issue but still having problems.

注意:在我的托管服务提供商环境中构建应用程序时，环境变量工作正常.它只是从我的本地机器上构建给我带来了麻烦.我的 IDE 是 VS Code.

Note: The environment variables work fine when building the app within my hosting providers environment. It is only building from my local machine that gives me trouble. My IDE is VS Code.

这是我在 nuxt.config.js 中的 axios 设置:

Here is my axios setup inside nuxt.config.js:

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

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

My .env file has the following:

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

构建应用程序时无法识别 .env 变量:

The .env variables are not being recognized when building the app:

nuxt build

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

Instead, it just sets the axios base url to the same host:port that the server runs on by default. Ex: localhost:4000

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

I found the following documentation from @nuxtjs/dotenv module: https://github.com/nuxt-community/dotenv-module#using-env-file-in-nuxtconfigjs. This instructs you to add the following to the top of nuxt.config.js:

require('dotenv').config()

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

This works for building locally; my variables from .env are recognized! However, because dotenv is a dev dependency, this causes the build to crash when deployed to my hosting provider because the module isn't recognized.

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

I know that I can define the environment variables directly in the build command as follows but I would prefer NOT to do so:

NUXT_ENV_BASE_URL=some.api.com nuxt build 

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

Is there an easy way to get environment variables to work locally inside of nuxt.config.js during the build process that also works well when deploying to production??

谢谢！

推荐答案

更新于 2020-09-26

从 2.13.0 开始，我已经删除了 @nuxtjs/dotenv.我的 nuxt.config.js 现在只是读取如下，删除了 dotenv 导入.我没有对其他代码进行任何更改，其余功能对我来说完全相同.

Updated 2020-09-26

As of 2.13.0 I have removed @nuxtjs/dotenv. My nuxt.config.js now simply reads as below with the dotenv imports removed. I made no other code changes and the rest functions exactly the same for me.

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

我的 .env 包含以下内容.

My .env contains the following.

DB_HOST=http://localhost:5001/

原答案

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

Original answer

I installed the following as a dev dependency; @nuxtjs/dotenv. Then I added the following to my nuxt.config.js. I found this import statement in an article and tried it. Thankfully it worked for me.

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

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

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

I created a file called .env with the following content

DB_HOST=http://localhost:5001/

这篇关于在 nuxt.config.js 中使用环境变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！