问题出现原因：

创建新项目配置请求这块的时候，需要使用到环境变量；
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 中进行修改，是一样的；

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

问题出现原因：

解决办法：

✅ 方式一

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

❌ 方式二