Vue / Vite v3.2.5 - 选项“output.format”的值“umd”无效

Question

我将 Vue2 与 Vite v3.2.5 一起使用，当我运行 npm run build 时，出现此错误：选项“output.format”的值“umd”无效 - 代码分割构建不支持 UMD 和 IIFE 输出格式。

这是我的 vite.config.js

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',
        },
        dedupe: [
            'vue'
        ]
    },
    alias: {
        '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    },
    build: {
        cssCodeSplit: true,
        lib: {
            input: {
                app: "./resources/js/app.js"
            },
            entry: resolve(__dirname, 'resources/js/app.js'),
            output: {
                path: path.resolve(__dirname, 'dist'),
                filename: 'bundle.js',
            },
            name: 'bundle',
            fileName: 'app'
        },
        rollupOptions: {
            external: ['vue'],
            output: {
                globals: {
                    vue: 'Vue',
                },
                format: "esm",
                inlineDynamicImports: false,
            },
        },
    },
});

有谁知道这里有什么问题吗？我的output.format 值是“esm”而不是“umd”？！感谢帮助！

Answer 1

当lib指定该选项时，看起来 Vite 默认生成es并umd捆绑：

使用此配置运行 vite build 使用面向发布库的 Rollup 预设，并生成两种捆绑格式：es 和 umd（可通过 build.lib 配置）：

（来自https://vitejs.dev/guide/build.html#library-mode）

要更改此设置，您必须formats在其中添加一个显式选项build.lib：

        lib: {
            input: {
                app: "./resources/js/app.js"
            },
            formats: ['es'],
            entry: resolve(__dirname, 'resources/js/app.js'),
            output: {
                path: path.resolve(__dirname, 'dist'),
                filename: 'bundle.js',
            },
            name: 'bundle',
            fileName: 'app'
        },