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路由的写法如下:

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,报错就会消失了。


原文出处:/show_1GW3OqmeGoOk.html