问题

Invalid value "umd" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds. 无效值 "umd" 选项 "output.format" - 不支持UMD和IIFE输出格式用于代码拆分构建。

That's my vite.config.js 这是我的 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,
            },
        },
    },
});

Does anyone know what's the problem here? My output.format value is "esm" and not "umd" ?! 有人知道问题在哪里吗？我的 output.format 值是 "esm" 而不是 "umd" ?! 谢谢帮助！

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,
},
},
},
});

答案1

得分: 3

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

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

(来自https://vitejs.dev/guide/build.html#library-mode)

要更改这个，您需要在build.lib内部添加一个明确的formats选项：

        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'
},

        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'
},