无法创建.env文件运行Vite项目，陷入无限循环求助

问题根源 #

你在vite.config.js里手动引入dotenv并自定义process.env变量的操作，和Vite自带的环境变量处理机制冲突了。Vite默认会自动加载.env文件并监听其变化，手动引入dotenv会触发重复的文件监听逻辑，进而导致服务器无限重启、构建被取消。

修复步骤 #

1. 简化Vite配置文件 #

删掉手动引入的dotenv和define配置，Vite会自动处理环境变量：

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

export default defineConfig({
  plugins: [react()]
})

2. 规范.env文件变量 #

确保.env里的变量以VITE_开头（Vite默认只识别带该前缀的环境变量）：

VITE_KEY=your_real_key_value

3. 代码中正确访问变量 #

用Vite原生的import.meta.env替代process.env来读取环境变量：

console.log(import.meta.env.VITE_KEY)

可选：兼容process.env（不推荐） #

如果必须保留process.env的写法，可在配置中通过define映射，但不要手动加载dotenv：

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

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env.VITE_KEY': JSON.stringify(import.meta.env.VITE_KEY)
  }
})

验证 #

修改完成后重启Vite服务器，.env文件的变更会被正常监听，不会再出现无限重启的循环问题。

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