在 ViteJS React 文件中使用 NodeJs 环境变量

环境变量"/>

在 ViteJS React 文件中使用 NodeJs 环境变量

我使用 ViteJs 生成一个 ReactJs 项目。在 vite.config.ts 文件中我们可以看到如下内容：

const isDev = process.env["DFX_NETWORK"] !== "ic"
const network = process.env.DFX_NETWORK ||
   (process.env.NODE_ENV === "production" ? "ic" : "local");

VueJs 在 Javascript 文件中使用

import.meta.env

(documentation) 来使用环境变量。 但是对于我的用例，我还需要在我的 javascript/typescript 文件中使用 nodejs

process.env

。

我如何设置 ViteJs 以便

process.env

也可以使用？

回答如下：

VITE_*

环境变量会按照您的描述自动暴露给构建的应用程序，在

import.meta.env

一旦构建的代码运行。

可以使用 vite 构建配置

define

属性来替换构建输出中的特定字符串。环境变量可以通过以下方式选择进入此过程：

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    define: {
      'process.env': {
        'DFX_NETWORK': env.DFX_NETWORK,
        'NODE_ENV':  env.NODE_ENV,
      }
    },
  })
}

您极不可能以这种方式将所有

process.env

公开给构建的应用程序，因为这可能会包含来自构建系统的私人信息。