Laravel9+Vite项目中env.d.ts失效致组件无法解析的问题排查

一、检查Components自动导入配置 #

确认vite.config.ts里的配置是否正确覆盖组件目录，尤其是自定义组件的子目录：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        Components({
            // 显式声明组件目录，开启递归扫描子目录
            dirs: [
                'resources/js/components',
                {
                    dir: 'resources/js/components/layouts',
                    deep: true
                }
            ],
            resolvers: [ElementPlusResolver()],
            // 明确指定类型文件生成路径
            dts: 'resources/js/components.d.ts',
        }),
    ],
});

• 注意自动导入默认不会递归扫描所有子目录，需通过deep: true开启
• 确认dts路径在TypeScript的扫描范围内

二、修复env.d.ts被忽略问题 #

修改tsconfig.json的include数组，确保包含env.d.ts文件：

{
    "include": [
        "resources/js/**/*",
        "env.d.ts"
    ],
    // 其他配置项...
}

如果env.d.ts放在resources/js目录下，调整路径为resources/js/env.d.ts

三、重新生成components.d.ts #

1. 停止当前Vite开发服务
2. 删除已生成的空components.d.ts文件
3. 执行npm run dev重启服务，触发插件重新生成类型文件

四、备选手动导入方案 #

若自动导入仍不生效，可在使用BaseHeader的文件中手动导入组件：

<script setup lang="ts">
import BaseHeader from './components/layouts/BaseHeader.vue';
</script>

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