如何在React vite应用程序中的index.html中使用env

Question

我正在尝试从我的index.html 文件访问环境变量。

下面的代码似乎在 CRA 中工作，但不适用于我的 vite、react 项目设置

const APP_ID = '%REACT_APP_ID%'

    <script>
      //Set your APP_ID
      const APP_ID = '%REACT_APP_ID%'

     ....

    </script>

我的 vite 配置文件

import { defineConfig, splitVendorChunkPlugin } from 'vite'
import react from '@vitejs/plugin-react'
import EnvironmentPlugin from 'vite-plugin-environment'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    splitVendorChunkPlugin(),
    react(),
    EnvironmentPlugin('all', { prefix: 'REACT_APP_' }),
  ],
})

Answer 1

Vite 4.2.0开始支持替换 HTML 文件中的环境变量。

使用VITE_前缀定义环境变量，并将其包装%在 HTML 文件中。

例如：

<div>%VITE_SOME_KEY%</div>