VUE3 hash路由报错:error TS2339: Property 'env' does not exist on type 'ImportMeta'. 作者:马育民 • 2026-05-29 16:20 • 阅读:10000 # 报错描述 ``` src/router/index.ts:38:45 - error TS2339: Property 'env' does not exist on type 'ImportMeta'. 38 history: createWebHashHistory(import.meta.env.BASE_URL), ~~~ Found 1 error in src/router/index.ts:38 [ELIFECYCLE] Command failed with exit code 2. ``` 配置hash路由的错误,出现这个错误的原因是,`import.meta.env` 是 Vite 在运行时注入的特性,但 TypeScript 默认并不知道它的存在(TS 默认的 `ImportMeta` 类型中只有 `url` 属性)。 # 分析 hash路由的写法如下: ```js import { createRouter, createWebHashHistory } from 'vue-router' // 改用 createWebHashHistory const router = createRouter({ history: createWebHashHistory(import.meta.env.BASE_URL), routes: [...] }) export default router ``` `import.meta.env.BASE_URL` 是 Vite 在运行时注入的特性,作用是获取 `vite.config.ts` 文件的 `base` 属性,如下图: [](https://www.malaoshi.top/upload/0/0/1GW3OqkpqMLg.png) 但 TypeScript **默认并不知道它的存在**(TS 默认的 ImportMeta 类型中只有 url 属性) # 解决 ### 方案一:添加 Vite 客户端类型引用(最推荐) 在你的项目根目录或 `src` 目录下,找到或新建一个名为 `vite-env.d.ts`(或者 `env.d.ts`、`global.d.ts`)的声明文件,在里面加上这一行代码即可: ```typescript /// ``` 这行“三斜线指令”会告诉 TypeScript 去引入 Vite 内置的类型定义,这样 TS 就能自动识别 `import.meta.env` 以及 `BASE_URL`、`MODE` 等基础属性了。 ### 方案二:在 tsconfig.json 中配置 types 打开项目根目录下的 `tsconfig.json` 文件,在 `compilerOptions` 选项中找到 `types` 字段,将 `"vite/client"` 添加进去: ```json { "compilerOptions": { // ...其他配置 "types": ["vite/client"] } } ``` 保存后,TypeScript 也会自动加载 Vite 的环境变量类型定义。 # 总结 通常推荐使用**方案一**,因为是 Vue + Vite 官方脚手架默认采用的方式。修改完成后,建议重启一下你的编辑器或 IDE,报错就会消失了。 原文出处:http://www.malaoshi.top/show_1GW3OqmeGoOk.html