Vite+Vue3+TS组件中import.meta.env未定义问题求助

1. 添加Vite环境变量类型声明 #

在项目根目录或src文件夹下创建env.d.ts文件，写入以下内容：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly APP_SOCKET_URL: string;
  // 可按需添加其他APP_前缀的自定义环境变量
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

该文件用于告诉TypeScript编译器import.meta.env包含你定义的环境变量，同时引入Vite客户端的默认类型定义。

2. 检查tsconfig.json配置 #

确保tsconfig.json的include字段包含了上述类型声明文件，示例配置如下：

{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "env.d.ts"]
}

这能保证TypeScript编译器识别到新增的类型定义。

3. 重启Vite开发服务器 #

修改类型声明文件后，必须重启开发服务器，让新的类型配置生效，否则可能仍会出现报错。

额外注意事项 #

• 确保.env文件中的变量名严格以APP_开头（与vite.config中的envPrefix配置一致），Vite仅会暴露符合前缀规则的环境变量给客户端代码。
• .env文件中的变量值无需额外添加引号，直接写APP_SOCKET_URL=ws://localhost:8765即可，Vite会自动处理为字符串类型。

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