上传到 Zeit/Now 时在客户端中暴露的 Nuxt 环境变量

Question

我正在使用 Zeit/Now 部署一个 Nuxt 应用程序。在开发阶段，我使用 .env 文件将机密存储到我的 Contentful CMS，并使用 nuxt-dotenv 包将机密公开给 process.env。为此，我在 nuxt.config 的顶部调用了 require('dotenv').config()。

然后我用 Zeit/Now 存储了秘密并创建了一个 now.json 来为构建和运行时设置它们，如下所示：

{
    "env": {
        "DEMO_ID": "@demo_id"
    },
    "build": {
        "env": {
          "DEMO_ID": "@demo_id"
        }
    }
}

使用该设置，构建仅适用于索引页面，所有 Javascript 都不起作用。只有当我将 env-属性添加到 nuxt.config.js 文件时，该应用程序才开始在 Zeit-server 上正常运行。

require('dotenv').config()

export default {
...
env: {
   DEMO_ID: process.env.DEMO_ID
  },
...
  modules: [
    '@nuxtjs/dotenv'
  ],
...
}

但是：当我检查上传的 Javascript 文件时，我的秘密被暴露了，这显然是我不希望的。

我在这里做错了什么？感谢您的帮助。

Answer 1

你不一定在这里做错了什么，这就是 Nuxtjs 的工作方式。

在env属性中声明的变量用于替换process.env.MY_ENV的实例，但是因为Nuxt是同构的，所以这既可以在服务器上也可以客户.

如果您希望这些秘密只能在服务器上访问，那么解决这个问题的最简单方法是使用 serverMiddleware.

As serverMiddleware is decoupled from the main Nuxt build, env variables defined in nuxt.config.js are not available there.

这意味着您的普通 ENV 变量应该可以访问，因为服务器中间件运行在节点上。

显然，这意味着这些秘密在客户端不可用，但如果您有类似 Stripe 秘密密钥的东西，您需要使用它来发出后端请求，这就有效。

Answer 2

我们在项目中遇到了类似的问题。甚至，我们从头开始创建一个nuxt项目，检查一下是否有我们跳过的情况。我们注意到，在构建 nuxt 时，它会将 .env 变量复制到 nuxt 文件夹中的 utils.js 中。通过文档here，我们将nuxt.config.js中的模块部分修改如下，

modules: ['@ nuxtjs / apollo', '@ nuxtjs / axios', ['@ nuxtjs / dotenv', { only: ['']}]],

然后我们注意到 .env 变量没有暴露。

希望对您有所帮助。

我们的 nuxt 版本是 "nuxt": "^ 2.13.0".

此外，关于 here 的一些讨论。

上传到 Zeit/Now 时在客户端中暴露的 Nuxt 环境变量

Nuxt environment variables exposed in client when uploaded to Zeit/Now

environment-variables

nuxt.js

vercel

dotenv