Vue3+TypeScript中unplugin-auto-import自动导入仍报TS错误

你遇到的红下划线报错，核心原因是TypeScript无法识别自动导入的API类型，结合你的配置来看，主要是以下几个问题导致的：

1. 未开启自动类型声明文件生成 #

你注释了AutoImport配置里的dts: true选项，这个选项是用来生成包含所有自动导入API类型声明的auto-imports.d.ts文件的。没有这个文件，TS编译器会认为那些自动导入的关键字是未定义的变量，从而报红。

解决方法： #

取消注释dts: true，修改后的AutoImport配置片段如下：

AutoImport({
    dts: true, // 取消注释此行
    include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
    ],
    imports: [
        'vue',
        'vue-router',
        'pinia',
        {
            '@/stores': ['useStores'],
        },
        {
            '@/common/constants': ['useConstants'],
        },
    ],
}),

开启后，项目根目录会自动生成auto-imports.d.ts文件，里面包含所有自动导入API的类型声明。

2. TS配置未包含自动生成的类型文件 #

即使生成了auto-imports.d.ts，如果你的tsconfig.json没有将这个文件纳入编译范围，TS仍然无法识别这些类型。

解决方法： #

打开tsconfig.json，确保include数组包含auto-imports.d.ts：

{
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "auto-imports.d.ts" // 添加此行
    ]
}

3. 重启IDE和开发服务 #

修改配置后，重启你的IDE（比如VS Code）和Vite开发服务，让新的类型声明文件被加载识别，红下划线即可消失。

额外注意： #

如果自定义导出的useStores、useConstants仍然报错，要确保这些函数有明确的类型定义，比如：

// @/stores/index.ts
export function useStores() {
    // 逻辑代码
    return { /* 返回值 */ }
}

TS会自动推断函数的返回类型，或者你可以手动添加类型注解来确保类型正确。

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