Laravel+Vue3+Vite构建后出现JavaScript模块MIME类型错误

核心问题分析 #

控制台的MIME类型错误，本质是浏览器请求构建后的JS模块时，服务器返回的是HTML页面（大概率是404页面），而非正确的JS资源，导致浏览器无法识别模块脚本。

针对性解决方案 #

1. 调整Vite构建目录适配Laravel规范 #

你的build.outDir设为了dist，但Laravel的laravel-vite-plugin默认期望构建产物放在public/build目录下，同时服务器默认从public目录提供静态资源。修改配置：

export default defineConfig({
    base: '/',
    // 移除自定义的publicDir，用Laravel默认的public目录即可
    build: {
        outDir: 'public/build', // 改为Laravel vite插件默认的构建目录
    },
    // 其他配置保持不变...
});

2. 确保模板中正确使用@vite指令 #

检查你的Blade模板（比如resources/views/app.blade.php），必须使用Laravel提供的@vite指令加载资源，不要手动写script标签：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>App</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app"></div>
</body>
</html>

手动写的script路径很容易在构建后出现路径错误，导致请求404返回HTML。

3. 修复别名配置中的绝对路径问题 #

你的别名里使用了__dirname拼接绝对路径，在Vite构建时可能会导致资源路径解析异常，建议统一用fileURLToPath和URL来处理：

resolve: {
    alias: {
        '@': fileURLToPath(new URL('./resources/router', import.meta.url)),
        '@2_AdminPanel': fileURLToPath(new URL('./public/2_AdminPanel', import.meta.url)),
        '@assets': fileURLToPath(new URL('./resources/js/assets', import.meta.url)),
        '@root': fileURLToPath(new URL('./resources/js/assets', import.meta.url)),
        '@front': fileURLToPath(new URL('./resources/assets/1_WebFrontend', import.meta.url)),
        '@admin': fileURLToPath(new URL('./resources/assets/2_AdminPanel', import.meta.url)),
        '@common': fileURLToPath(new URL('./resources/assets/0_Common', import.meta.url)),
        '__': fileURLToPath(new URL('./resources/js', import.meta.url)),
    },
}

避免使用__dirname，因为Vite在ESM模块下的路径解析逻辑和CommonJS有差异。

4. 验证服务器静态资源配置 #

如果是用Nginx或Apache部署，确保服务器配置中把静态资源的根目录指向项目的public目录，比如Nginx配置：

server {
    root /path/to/your/project/public;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        # PHP处理配置...
    }
}

如果静态资源根目录没指向public，请求/build/xxx.js时会找不到文件，返回404 HTML页面。

5. 清理缓存重新构建 #

执行以下命令清理旧构建产物并重新构建：

rm -rf public/build
npm run build
php artisan view:clear

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