在vite.config.js中配置代理时，无法通过import.meta.env访问环境变量求助

你遇到的问题核心是：import.meta.env仅能在客户端业务代码（比如React组件、页面JS文件）中使用，而vite.config.js是运行在Node.js环境的配置文件，不能直接用这个语法。要在Vite配置里读取环境变量，得用Vite内置的loadEnv函数。

具体修改方案 #

把你的vite.config.js改成以下形式：

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

export default defineConfig(({ mode }) => {
  // 加载项目根目录下的.env文件，自动读取VITE_前缀的环境变量
  const env = loadEnv(mode, process.cwd())

  return {
    server: {
      proxy: {
        '/api': {
          target: env.VITE_BACKEND_API_URL
        }
      }
    },
    plugins: [react()]
  }
})

额外注意点 #

• .env文件必须放在项目根目录（和vite.config.js同级），如果放在其他路径，需要在loadEnv的第二个参数传入对应目录路径
• 建议修改.env里的变量写法，去掉单引号：VITE_BACKEND_API_URL=http://localhost:3000，避免解析时带上多余的引号字符

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