使用Vite构建Laravel应用时无法解析Vue组件导入的问题

环境配置（vite.config.js） #

import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'packages/canvas/resources/sass/app.scss',
                'packages/canvas/resources/js/app.js'
            ],
            refresh: true,
        }),
        vue()
    ],
});

路由文件代码（router.js） #

import AllStats from '../views/AllStats';
import EditPost from '../views/EditPost';
import EditSettings from '../views/EditSettings';

项目目录结构 #

(Laravel应用根目录)
packages
    |----canvas
         |----resources
             |----js
                  |----router
                      |----router.js // Vue导入语句在此文件中
                  |----views
                      |----AllStats.vue
                      |----EditPost.vue
                      |----...

构建错误信息 #

执行npm run build时出现如下错误：

Could not resolve '../views/AllStats' from packages/canvas/resources/js/router/routes.js
error during build:
Error: Could not resolve '../views/AllStats' from packages/canvas/resources/js/router/routes.js
    at error (file:///Users/rago/workspace/krolestwo/mycanvas/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
    at ModuleLoader.handleResolveId (file:///Users/rago/workspace/krolestwo/mycanvas/node_modules/rollup/dist/es/shared/rollup.js:22156:24)
    at file:///Users/rago/workspace/krolestwo/mycanvas/node_modules/rollup/dist/es/shared/rollup.js:22119:26

问题原因分析 #

1. 缺少文件扩展名：Vite/Rollup不会自动识别.vue扩展名，导入组件时必须明确添加后缀。将导入语句改为import AllStats from '../views/AllStats.vue';即可解决路径解析问题。
2. 大小写不匹配：Mac系统默认大小写不敏感，但Docker容器内的Linux环境是大小写敏感的。检查导入语句中的文件名和实际文件的大小写是否完全一致，比如AllStats.vue和allstats.vue会被Linux视为不同文件。
3. Docker目录挂载异常：确认Docker容器内的packages目录是否与本地目录正确同步，避免出现本地存在文件但容器内缺失的情况，导致构建时找不到文件。

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