Ich habe ein sehr einfaches Axios-Setup für eine Vue 3-Anwendung, die auf Vite und Typescript basiert. Ich erhalte jedoch einen Typoskriptfehler für „baseURL“, der lautet:

Eingabe 'string|'boolean|undefiniert' kann nicht dem Typ 'string|undefiniert' zugewiesen werden. Der Typ „false“ kann nicht dem Typ „string | ‚undefiniert‘.ts(2322)

zugewiesen werden.“

Wie ausdrücklich angedeutet, akzeptiert VITE_API_URL 的类型为 string |布尔 | undefined，但 baseURL keine booleschen Werte. Nun versuche ich natürlich nicht, dieser Eigenschaft einen booleschen Wert zuzuweisen, aber ihr Typ deutet darauf hin, dass es sein könnte , und das reicht aus, um damit herumzuspielen.

Jetzt definiert Vite eine Schnittstelle für VITE_API_URL wie folgt:

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

Wenn ich derjenige wäre, der diese Schnittstelle erstellt, würde ich einfach den booleschen Wert entfernen, da ich für diesen Wert niemals einen booleschen Wert festlegen würde, aber ich bin nicht davon überzeugt, dass das Ändern der integrierten Schnittstelle von Vite hier das richtige Verfahren ist.

Ich bin immer noch dabei, meine Typescript-Kenntnisse zu erweitern, also hoffe ich, dass mir etwas Einfaches fehlt, aber ich kann anscheinend keine Lösung finden, damit diese beiden gut funktionieren. Angesichts der Beliebtheit von Vite und Axios hoffe ich, dass jemand anderes auf dieses Problem gestoßen ist und eine einfache Lösung gefunden hat. Jede Hilfe wäre sehr dankbar!

httpClient.ts ist wie folgt:

import axios from 'axios';

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

export default httpClient;