VUE3 hash路由报错：error TS2339: Property 'env' does not exist on type 'ImportMeta'.-马育民老师

# 报错描述

```
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)](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
/// <reference types="vite/client" />
```

这行“三斜线指令”会告诉 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，报错就会消失了。