【从零搭建税务自动化系统-前端篇】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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值