如何在Vite + React项目中修改envPrefix与envDir配置？

配置修改方案 #

你只需要在vite.config.js的defineConfig配置项中新增envPrefix和envDir字段即可，修改后的完整配置参考如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  // 配置环境变量前缀，可自定义为你需要的前缀，比如REACT_APP_
  // 如果设置为空字符串''，会将所有环境变量暴露到前端，请注意安全风险
  envPrefix: 'REACT_APP_',
  // 配置.env文件所在的目录，默认是项目根目录，可根据你的存放路径修改
  // 比如你的.env文件存放在项目根目录的config文件夹下，就填写'./config'
  envDir: './'
})

注意事项 #

• 修改配置后需要重启Vite开发服务，新的配置才会生效
• 配置完成后环境变量依然通过import.meta.env.你的变量名方式在前端代码中调用
• 非必要不建议将envPrefix设置为空字符串，避免敏感的服务端环境变量意外泄露到前端

内容的提问来源于stack exchange，提问作者Ihor