将 VITE_API_URL 分配给 axios 的 baseURL 时出现打字稿错误

Question

我在基于 Vite 和 Typescript 构建的 Vue 3 应用程序上有一个非常基本的 axios 设置。但是，我收到“baseURL”的打字稿错误，内容为：

Type 'string | boolean | undefined' is not assignable to type 'string | undefined'. Type 'false' is not assignable to type 'string | undefined'.ts(2322)

明确表示 VITE_API_URL 是 string | boolean | undefined 类型，但 baseURL 不喜欢接受布尔值。现在，显然我并没有试图为这个属性分配一个布尔值，但它的类型表明它 可能是 ，这足以让它不高兴。

现在Vite为VITE_API_URL定义了一个接口如下：

interface ImportMetaEnv {
  [key: string]: string | boolean | undefined
  BASE_URL: string
  MODE: string
  DEV: boolean
  PROD: boolean
  SSR: boolean
}

如果我是创建这个界面的人，我会删除布尔值，因为我永远不会为这个值设置布尔值，但我不满意改变 Vite 的内置界面是正确的做法在这里。

我仍在扩展我的 Typescript 知识，所以我希望这是我所缺少的简单的东西，但我似乎找不到任何解决方案来让这两个很好地发挥作用。考虑到 Vite 和 Axios 的流行程度，我希望其他人对此有运行的了解并找到一个简单的解决方案。如有任何帮助，我们将不胜感激！

httpClient.ts 下面:

import axios from 'axios';

const httpClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default httpClient;

Answer 1

您可以augment ImportMetaEnv为您正在使用的任何自定义环境变量添加类型：

在src/env.d.ts（如果需要创建），添加如下代码：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string
}

如果使用 VS Code，您可能需要重新启动 TypeScript 服务器（或 IDE 本身）才能重新加载类型。

将 VITE_API_URL 分配给 axios 的 baseURL 时出现打字稿错误

Typescript Error assigning VITE_API_URL to axios' baseURL

typescript

vue.js

axios

vuejs3

vite