【从零搭建税务自动化系统-前端篇】env.d.ts 和 import.meta.env 的使用

​

在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)