vue.config.js 配置多入口问题

3,044 阅读1分钟

多页面入口配置

pages: {
    index: {
        entry: 'src/index.js',
        template: 'public/index.html'
    },
    app: {
        entry: 'src/main.js',
        template: 'public/main.html'
    }
}

配置了多页面入口之后,在生产环境打包的时候发现 preload 插件报错

config.plugin('preload').tap(() => [
    {
        rel: 'preload',
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
     }
])

报错如下

Error: Cannot [call](https://so.csdn.net/so/search?q=call&spm=1001.2101.3001.7020) .tap() on a plugin that has not yet been defined. Call plugin(‘preload’).use() first.

处理:配置多个plugin


Objects.keys(pages).forEach(name => {
    config.plugin(`preload-${name}`).tap(() => [
        {
            rel: "preload",
            // ...
        }

    })
]);