Vue2 + Vite v3.2.5构建报错：output.format值umd不支持代码分割

你的报错根源是Laravel Vite插件与Vite库模式（lib）的配置冲突，加上build.lib的参数错误，导致Vite fallback到默认的umd格式，而umd不支持你开启的cssCodeSplit代码分割。

具体问题点 #

1. 模式冲突：Laravel Vite插件是为普通Web应用构建设计的，而你同时配置了build.lib（库模式），两种模式的输出逻辑相互干扰，导致Rollup的格式配置被覆盖。
2. lib配置错误：
   • 同时定义了input和entry，这两个参数互斥（单入口用entry，多入口用input）
   • lib.output是无效配置，Vite库模式下，输出配置应放在build.rollupOptions.output中
3. 格式 fallback：当Vite检测到lib模式配置混乱时，会自动使用umd作为默认格式，而你开启了cssCodeSplit: true，umd不支持代码分割，因此触发报错。

解决方案 #

根据你的构建目标选择对应配置：

场景1：构建Laravel应用

移除build.lib配置块，保留Laravel插件处理应用构建：

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,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm.js',
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        },
        dedupe: [
            'vue'
        ]
    },
    build: {
        cssCodeSplit: true,
        rollupOptions: {
            // 若无需external Vue，可移除以下配置
            // external: ['vue'],
            // output: {
            //     globals: {
            //         vue: 'Vue',
            //     },
            //     format: "esm",
            //     inlineDynamicImports: false,
            // },
        },
    },
});

场景2：构建Vue组件库

移除Laravel插件，修正lib模式配置：

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

export default defineConfig({
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm.js',
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        },
        dedupe: [
            'vue'
        ]
    },
    build: {
        cssCodeSplit: true,
        lib: {
            entry: resolve(__dirname, 'resources/js/app.js'),
            name: 'bundle',
            fileName: 'app'
        },
        rollupOptions: {
            external: ['vue'],
            output: {
                globals: {
                    vue: 'Vue',
                },
                format: "esm",
                inlineDynamicImports: false,
            },
        },
    },
});

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