报错描述
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路由的写法如下:
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 属性,如下图:
但 TypeScript 默认并不知道它的存在(TS 默认的 ImportMeta 类型中只有 url 属性)
解决
方案一:添加 Vite 客户端类型引用(最推荐)
在你的项目根目录或 src 目录下,找到或新建一个名为 vite-env.d.ts(或者 env.d.ts、global.d.ts)的声明文件,在里面加上这一行代码即可:
/// <reference types="vite/client" />
这行“三斜线指令”会告诉 TypeScript 去引入 Vite 内置的类型定义,这样 TS 就能自动识别 import.meta.env 以及 BASE_URL、MODE 等基础属性了。
方案二:在 tsconfig.json 中配置 types
打开项目根目录下的 tsconfig.json 文件,在 compilerOptions 选项中找到 types 字段,将 "vite/client" 添加进去:
{
"compilerOptions": {
// ...其他配置
"types": ["vite/client"]
}
}
保存后,TypeScript 也会自动加载 Vite 的环境变量类型定义。
总结
通常推荐使用方案一,因为是 Vue + Vite 官方脚手架默认采用的方式。修改完成后,建议重启一下你的编辑器或 IDE,报错就会消失了。
