TS踩坑日记 - 类型“ImportMeta”上不存在属性“env”

问题出现原因:

  • 创建新项目配置请求这块的时候,需要使用到环境变量;
  • Vue3中使用环境变量和Vue2不太一样,需要使用 import.meta.env 去获取,并且对应的文件中必须使用 VITE_ 开头,才能被 import.meta.env 读取到;
  • 在使用的时候,ts文件报红显示 类型"ImportMeta"上不存在属性"env"

解决办法:

✅ 方式一

  • 我是使用的 pnpm create vue@latest 这种方式创建的项目,创建好项目之后,在项目的根目录下自带有 env.d.ts文件,在该文件中有这样一段代码:
ts 复制代码
/// <reference types="vite/client" />
  • 如果没有该声明文件的,可以自行创建一个,然后将该代码复制进去,即可解决;
  • 解释
    • 这是 ts 中的 三斜线指令
    • 三斜线指令
      • 是包含单个XML标签的单行注释。注释的内容会作为编译器指令使用;
      • 三斜线指令 可放在包含它的文件的最顶端,一个三斜线指令的前面只能出现单行或多行注释,这包括其他的三斜线指令;
      • 如果他们出现一个语句或声明之后,那么它们会被当作普通的单行注释,并不具有特殊的含义;

/// <reference types="..." />

  • 这个指令是用来声明 依赖 的;

  • 一个 /// <reference types="..." />指令则声明了对某个包的依赖。

  • 对这些包的名字的解析与在 import语句里对模块名的解析类似。 可以简单地把三斜线类型引用指令当做 import声明的包。

  • 例如,把 /// <reference types="node" />引入到声明文件,表明这个文件使用了 @types/node/index.d.ts里面声明的名字; 并且,这个包需要在编译阶段与声明文件一起被包含进来。

  • 仅当在你需要写一个d.ts文件时才使用这个指令。

关于TS项目具体的配置,具体请移步至 🎯 TypeScript项目配置

  • 更加推荐这种方式,默认情况下,Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。随着在 .env[mode] 文件中自定义了越来越多的环境变量,你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。
  • 要想做到这一点,我们还是需要依赖于 env.d.ts 文件,接着按下面这样增加 ImportMetaEnv 的定义:
ts 复制代码
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

❌ 方式二

  • 修改配置文件:tsconfig.app.json
  • 如果没有 tsconfig.app.json 文件,可以在 tsconfig.json 中进行修改,是一样的;
相关推荐
万邦科技Lafite1 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
一只小透明啊啊啊啊3 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友4 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao4 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子5 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...5 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪5 小时前
函数组件和异步组件
前端·javascript·面试
淮北4945 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友5 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei5 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发