Vite v3.2.5下将app.mjs改为app.js以解决Firefox MIME类型错误

问题根源 #

Vite默认对ES模块格式的输出文件使用.mjs后缀，若服务器未正确配置.mjs的MIME类型（返回application/octet-stream而非application/javascript），Firefox会阻止模块加载。你需要调整Vite配置，将输出文件改为.js后缀。

解决方案 #

1. 移除冲突的lib配置 #

你的build.lib配置是用于构建可复用库的，而当前是Laravel+Vue应用场景，laravel-vite-plugin会自动处理应用构建流程，保留该配置会导致输出路径、文件名冲突，先移除这部分内容。

2. 强制指定输出文件后缀为.js #

修改build.rollupOptions.output配置，覆盖Vite默认的ES模块文件名规则：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';
const path = require('path')
import { resolve } from 'path'

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'public/widget.hot',
            input: [
                'resources/js/app.js',
                'resources/scss/app.scss',
                'resources/scss/index.scss'
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: true
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm.js',
        },
        dedupe: [
            'vue'
        ]
    },
    alias: {
        '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    },
    build: {
        cssCodeSplit: true,
        rollupOptions: {
            external: ['vue'],
            output: {
                globals: {
                    vue: 'Vue',
                },
                // 强制入口文件输出为[name].js格式
                entryFileNames: 'assets/[name].js',
                inlineDynamicImports: false,
            },
        },
    },
});

3. 可选：切换模块格式（若无需ES模块） #

如果你的项目不需要ES模块特性，可将构建格式改为umd或iife，这类格式默认输出.js文件：

// 在build.rollupOptions.output中添加
format: 'umd',

验证步骤 #

1. 执行npm run build重新构建项目
2. 检查public/build目录下的输出文件，确认已生成app.js而非app.mjs
3. 刷新Firefox页面，模块加载错误应该会消失

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