我在基于 Vite 和 Typescript 构建的 Vue 3 应用程序上有一个非常基本的 axios 设置。但是,我收到“baseURL”的打字稿错误,内容如下:
输入“字符串|”布尔 | undefined' 不可分配给类型 'string |不明确的'。 类型“false”不可分配给类型“string |”未定义'.ts(2322)
正如明确暗示的那样,VITE_API_URL
的类型为 string |布尔 | 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;
您可以增强
ImportMetaEnv
添加输入您正在使用的任何自定义环境变量:在
src/env.d.ts
(如果需要的话创建)中,添加以下代码:如果使用 VS Code,您可能需要重新启动 TypeScript 服务器(或 IDE 本身)才能重新加载类型。