import.meta.env报错：Property ‘env‘ does not exist on type ‘ImportMeta‘

最新推荐文章于 2024-12-26 00:30:00 发布

weixin_49267032

最新推荐文章于 2024-12-26 00:30:00 发布

阅读量4k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49267032/article/details/136630157

文章讲述了在使用Vite构建Vue3项目时，遇到import.meta.env访问错误的问题，介绍了四种解决方法：1）忽略类型校验，2）使用类型断言，3）在tsconfig.json中添加特定类型，4）在.d.ts文件中声明模块。作者指出可能因环境差异导致部分方法未生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：用vite创建vue3项目叠加ts，访问import.meta中的变量。

问题：代码提示import.meta中只有url，手动访问env会报错：Property 'env' does not exist on type 'ImportMeta'，但是浏览器中可以打印。

解决方法（方法1和方法2在我的项目中有用，方法3和方法4大家说可以，可能是环境问题，在我的项目中没有起作用，但是大家说有用，那就记录下来，以后有机会再试一试）：

1、忽略类型校验：

//@ts-ignore
console.log('vite', import.meta.env)

2、使用类型断言：

console.log('vite', (import.meta as any).env)

3、在tsconfig.json下的compilerOptions中增加："types'': [''vite/client'']

{
  "compilerOptions": {
    "types": ["vite/client"],
  }
}

4、在.d.ts文件中声明模块：

declare interface ImpoertMetaEnv {
  readonly MODE: string
  // readonly VITE_BASE_URL: string
  // readonly VITE_TIME_OUT: number
}

declare interface ImpoertMeta {
  readonly env: ImpoertMetaEnv
}