Laravel-Mix迁移Vite后，构建时无法解析无扩展名导入文件

将Laravel项目从Laravel-Mix迁移至Vite后，npm run dev开发模式运行正常，但执行npm run build构建时抛出错误：

Error: Could not load resources/js/hooks/useRoute (imported by resources/js/app.tsx): ENOENT: no such file or directory, open 'C:\OpenServer\domains\colorbit.local\resources\js\hooks\useRoute'

项目中所有文件导入均未使用扩展名（例如import {Button} from '@components/ui/Button'，无需.ts扩展名），IDE提示这是正确写法，添加扩展名反而会报错。需要修改vite.config.js以支持无扩展名导入。

调整vite.config.js中的resolve配置，优化扩展名匹配顺序并使用绝对路径定义别名：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.tsx',
            ],
            refresh: true,
        }),
        react({
            fastRefresh: false
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
            '@assets': path.resolve(__dirname, 'resources/js/assets'),
            '@hooks': path.resolve(__dirname, 'resources/js/hooks'),
            '@components': path.resolve(__dirname, 'resources/js/components')
        },
        // 优先匹配TypeScript扩展名，确保无扩展名导入能找到对应文件
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
});

关键调整点： #

• 扩展名匹配顺序：将.ts、.tsx放在extensions数组最前面，Vite会按顺序查找文件，优先匹配TypeScript类型的文件，解决构建时找不到无扩展名文件的问题。
• 绝对路径别名：使用path.resolve定义别名的绝对路径，避免开发环境与构建环境的路径解析差异。
• 文件存在性检查：确保目标文件确实存在于对应路径下（例如resources/js/hooks/useRoute.ts或useRoute.tsx），文件名大小写与导入语句一致（Windows环境下大小写不敏感，但构建时可能出现问题）。

内容的提问来源于stack exchange，提问作者Влад Рогов