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

Question

我正在使用Nuxt & Axios，但在使用环境变量时遇到了问题，当 建筑物 吾之申请 本机.

我已经安装了@nuxtjsdotenv模块，试图解决这个问题，但仍然有问题。

注意：在我的主机提供商环境中构建应用程序时，环境变量工作正常。只有在我的本地机器上构建时才会出现问题。我的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的基本网址设置为与服务器默认运行的host:port相同。例如：localhost:4000

我从@nuxtjsdotenv模块中找到了以下文档。https:/github.comnuxt-communitydotenv-module#using-env-file-in-nuxtconfigjs。. 这指示你在nuxt.config.js的顶部添加以下内容。

require('dotenv').config()

这在本地构建时是有效的；我的.env变量被识别了！然而，由于dotenv是一个开发依赖，这将导致我在部署到托管提供商时崩溃。然而，由于dotenv是一个开发依赖，当部署到我的主机提供商时，这将导致构建崩溃，因为模块不被识别。

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

NUXT_ENV_BASE_URL=some.api.com nuxt build 

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

谢谢你！我在使用Nuxt & Axios。

Answer 1

我安装了以下模块作为开发依赖；@nuxtjsdotenv。然后我在nuxt.config.js中添加了以下内容。我发现了这个导入语句 在一篇文章中 并试了一下。幸运的是，它为我工作了。

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

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

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

DB_HOST=http://localhost:5001/