从公共文件夹内部访问NextJS环境变量

Question

从公共文件夹内部访问NextJS环境变量

3

我有一个自定义的 .js 文件，放在我的 NextJS 应用程序的 public 文件夹中。我需要能够在那个 .js 文件中使用环境变量，但是似乎环境变量在那里不可用。

我读到，public 文件夹中的文件不会经过 webpack 构建过程。

我该如何定制我的 Next.js 应用程序，以便在 public 文件夹内构建一个附加文件？我在 suggestion（答案中的选项 1）中找到了一种在 Vue.js 应用程序中执行此操作的方法。有人知道如何在 Next.js 中实现类似的功能吗？

- artooras

1

出于好奇，将env vars文件放在“public”文件夹中的原因是什么？ - juliomalves

1

我的脚本功能依赖于项目的基本路径。目前，我在公共文件夹中有两个不同的.js文件，代码相同，但基本路径不同（开发环境为localhost，生产环境为公共URL）。我希望只维护一个文件，在构建时根据需要进行编译。 - artooras

1

其实，我刚刚澄清了问题的标题——它可能有点误导人了... :) - artooras

@juliomalves 我想要从public/文件夹中提供一个service worker .js文件，并且在serviceWorker内部必须访问.env中的变量。 - Dynalon

尝试在部署应用程序时使用所需的值更新js文件。这可以通过例如PowerShell任务轻松完成。 - Remko

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- luke · Accepted Answer

首先，您需要安装一个名为copy-webpack-plugin的包：

npm install copy-webpack-plugin --save-dev

这个包应该允许您自定义构建过程。

接下来，在您的next.config.js文件中，您可以添加一个自定义的Webpack配置，将您的环境变量写入一个新的.js文件，然后在构建过程中将其复制到您的public文件夹中：

const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
const fs = require('fs');

module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      // The .js file you want to create
      const fileContent = `const env = ${JSON.stringify(process.env)};`;

      // The path of the file
      const filePath = path.join(__dirname, 'public', 'env.js');

      // Create the file
      fs.writeFileSync(filePath, fileContent, 'utf8');

      // Configure webpack to copy the file to the public folder
      config.plugins.push(
        new CopyPlugin({
          patterns: [
            { from: 'public', to: '' },
          ],
        })
      );
    }

    return config;
  },
};

这里需要注意的一件重要事情是：通过这样做，你将会把所有的环境变量暴露给客户端。如果其中包含任何敏感数据，那么这就有些冒险了。你可能需要调整fileContent变量，只包括你需要的变量：

const fileContent = `const env = {MY_VAR: "${process.env.MY_VAR}"};`;

这样你只需要在你的public文件夹中暴露你需要的变量。用你的环境变量的名称替换"MY_VAR"。

希望这些能有所帮助。