在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设置为默认情况下服务器在其上运行的同一host:port.例如:localhost: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模块中找到了以下文档:

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是dev的依赖项，因此，由于无法识别该模块，因此在将其部署到我的托管服务提供商时会导致构建崩溃.

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.

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

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/

原始答案

我将以下内容安装为dev依赖项；@ nuxtjs/dotenv.然后，将以下内容添加到我的nuxt.config.js中.我在中找到了此导入语句文章并进行了尝试.幸运的是，它对我有用.

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屋！