在vite项目的根目录下有个env.d.ts文件,它到底有什么用呢?应该写哪些内容,接下来一一做个解释和记录。
1. 引入vite/client
写三个斜线,把node_modules里的vite文件夹里的client客户端类型声明文件导入到这个文件里。
/// <reference types="vite/client" />
2. 设置让typescirpt认识.vue文件的类型声明文件
为了 typescript 做的适配定义文件,因为.vue 文件不是一个常规的文件类型,ts 是不能理解 vue 文件是干嘛的,加这一段是是告诉 ts,vue 文件是这种类型的。
可以把这一段删除,会发现 import 的所有 vue 类型的文件都会报错。
declare module "*.vue" {
import { DefineComponent } from "vue";
const component:DefineComponent<{},{},any>
export default component
}
3. 定义自定义环境变量属性的接口
写env.development和env.production文件里的自己创建的环境变量的类型声明文件
在import.meta.env.自己创建的变量会用上
interface ImportMetaEnv{
/** 应用端口 */
readonly VITE_APP_PORT: string;
/**
* 后端接口调用地址
*/
readonly VITE_APP_REMOTE_API_URL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
在vue文件中可以直接使用import.meta.env.VITE_APP_PORT 进行调用
main.ts
console.log(import.meta.env.VITE_APP_PORT)