Vue/Vite/TypeScript项目默认需拆分import与import type？如何解决？

为什么默认需要拆分导入？ #

你用create-vue生成的TS项目，默认开启了"isolatedModules": true（这是Vite构建工具要求的配置，用来提升单文件编译效率），同时TypeScript在这个模式下，不允许在同一条import语句中混合导入「运行时值」和「编译期类型」：

• axios是模块导出的运行时值（可以在代码中调用的实例）
• AxiosInstance、AxiosResponse是仅在编译阶段存在的类型，运行时会被完全擦除

当你合并导入时，TS在单文件编译模式下无法自动区分哪些是值、哪些是类型，所以会抛出「模块未导出AxiosInstance」的错误——本质是它把类型当成了运行时值来解析，自然找不到对应的导出项。

至于你设置"verbatimModuleSyntax": "false"没用，是因为这个配置主要控制是否保留导入语句的语法形式，无法绕过isolatedModules对类型导入的严格要求。

如何实现合并导入？ #

不用拆分也能实现合并导入，只要在导入的类型前加上type关键字，明确告诉TS这是类型导入：

import axios, { type AxiosInstance, type AxiosResponse } from "axios"

这种写法既保持了导入语句的简洁，又符合isolatedModules模式下的规则，不管是第三方模块还是自定义接口都适用。

如果实在不想加type前缀，也可以关闭tsconfig.json里的"isolatedModules": false，但不推荐这么做——这会降低Vite的构建效率，还可能引发某些和构建工具相关的兼容性问题。

内容的提问来源于stack exchange，提问作者Santi