问题出现原因:
- 创建新项目配置请求这块的时候,需要使用到环境变量;
- 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
中进行修改,是一样的;