Vue-element-admin: 配置多页应用打包后, chunk-vendors 等文件没有注入到 html 中

[xiaohaiH]

Bug report（问题描述）

https://github.com/PanJiaChen/vue-element-admin/blob/46cc375d0d91261a7962715dd48e66e10e8c5872/vue.config.js#L100-L136
vue 配置多页应用, chunk-vendors 等文件没有注入到 .html 中, 必须得删除掉这段代码, 请问有什么办法解决吗?
因为循环引用的问题, 我还增加了如下代码

        // TODO: Remove this workaround once https://github.com/vuejs/vue-cli/issues/2463 is fixed
        // Remove preload plugins for multi-page build to prevent infinite recursion
        Object.keys(pages).forEach(page => {
            config.plugins.delete(`preload-${page}`);
            config.plugins.delete(`prefetch-${page}`);
        });

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

• Your OS:
• Node.js version:
• vue-element-admin version:

[LKen]

大神，你好。关于这个问题，你已经解决了吗？

[kililixi]

根据问题主楼贴的 issue
循环引用的问题只要更新下 @vue/preload-webpack-plugin 就行了，问题是直接打包会出现 runtime的js 404的问题(我不懂什么原因)；
然后如果按问题描述的那样删掉 那段ScriptExtHtmlWebpackPlugin的配置，问题倒是都解决了，只是打包出来的文件就不一样了，页面一开始就加载几十个文件。。。
@xiaohaiH 请问您是如何配置解决这个问题的呢，谢谢

[xiaohaiH]

抱歉，最近没看 issue，晚点我将解决代码贴上来

[xiaohaiH]

这个是我设置的 pages, chunks 中chunk-libs与chunk-commons是切割出来的代码

pages ={
    index: {
        entry: 'src/main.ts',
        template: 'public/index.html',
        filename: 'index.html',
        chunks: ['chunk-libs', 'chunk-commons', 'runtime', 'index'],
    },
    mini: {
        entry: 'src/mobile-main.ts',
        template: 'public/index.html',
        filename: 'mini.html',
        chunks: ['chunk-libs', 'chunk-commons', 'runtime', 'mini'],
    },
}

最开始配置是这样的 chunks 里多了一个 index~mini, 不加项目也是一片空白(在 dist/js 下也存在这个文件), 后面不知道为什么没了, 所以去掉了, 具体的你也可以看看 dist/js 的文件, 除了打包生成随机文字的文件, 看还有没有其它名称的文件, 可以尝试引入试试.

pages = {
    index: {
        entry: 'src/main.ts',
        template: 'public/index.html',
        filename: 'index.html',
        chunks: ['chunk-libs', 'chunk-commons', 'runtime', 'index', 'index~mini', 'manifest'],
    },
    mini: {
        entry: 'src/mobile-main.ts',
        template: 'public/index.html',
        filename: 'mini.html',
        chunks: ['chunk-libs', 'chunk-commons', 'runtime', 'mini', 'index~mini', 'manifest'],
    },
};

[kililixi]

@xiaohaiH 也就是说是做了以前变更吗？

1. 增加了多页面的设置的pages选项
2. 为了避免循环引用而增加的代码
3. chainWebpack的配置中把elementUI的设置注释了

我试了下按您的配置做了以前更改

1. 增加 pages:

 pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
      chunks: ['chunk-libs', 'chunk-commons', 'runtime', 'index']
    },
    portal: {
      entry: 'src/portal/main.js',
      template: 'public/portal.html',
      filename: 'portal.html',
      title: 'MalaysiaVisa',
      chunks: ['chunk-libs', 'chunk-commons', 'runtime', 'portal']
    }
  },

1. 循环引用采用更新插件版本解决
2. 把chainWebpack配置里的optimization.splitChunks的element-ui注释了。

结果是打包后的dist下没有runtime的js，并且页面加载的时候是加载了很多的js，而不像原本的只加载4,5个。。。我先看下这些插件的定义。。

[xiaohaiH]

多出来的 js 是因为被切割了 👇, 这段代码是我把项目内的文件切割了, 取的名字叫 chunk-commons
element-ui 取消是因为我用的 iview, 所以注释了

commons: {
    name: 'chunk-commons',
    test: resolve('src/components'), // can customize your rules
    minChunks: 3, //  minimum common number
    priority: 5,
    reuseExistingChunk: true,
}

以下是我完整的配置(删除了无关的代码)

const path = require('path');
const resolve = dir => path.join(__dirname, dir);


const pages = {
    index: {
        entry: 'src/main.ts',
        template: 'public/index.html',
        filename: 'index.html',
        chunks: ['chunk-libs', 'chunk-commons', 'runtime', 'index', 'index~mini', 'manifest'],
    },
    mini: {
        entry: 'src/mobile-main.ts',
        template: 'public/index.html',
        filename: 'mini.html',
        chunks: ['chunk-libs', 'chunk-commons', 'runtime', 'mini', 'index~mini', 'manifest'],
    },
};


module.exports = {
    // 对 node-modules 里的文件做兼容处理
    transpileDependencies: [
        'vue-echarts',
        'resize-detector',
        'vuex-module-decorators',
    ],
    productionSourceMap: false,
    pages,
    // 不开启 eslint 模式
    lintOnSave: false,
    // 运行时编译
    // runtimeCompiler: true,
    css: {
        loaderOptions: {
            sass: {
                // 配置全局 scss 变量
                data: [
                    `@import "~@/assets/scss/var.scss";`,
                    `@import "~@/assets/scss/mixins.scss";`,
                    `@import "~@/assets/scss/utils.scss";`,
                ].join('\n'),
            },
        },
    },
    chainWebpack(config) {

        config
            .when(
                process.env.NODE_ENV !== 'development',
                config => {
                    config
                        .plugin('ScriptExtHtmlWebpackPlugin')
                        .after('html')
                        .use('script-ext-html-webpack-plugin', [{
                            // `runtime` must same as runtimeChunk name. default is `runtime`
                            inline: /runtime\..*\.js$/,
                        }])
                        .end();
                    config
                        .optimization.splitChunks({
                            chunks: 'all',
                            cacheGroups: {
                                libs: {
                                    name: 'chunk-libs',
                                    test: /[\\/]node_modules[\\/]/,
                                    priority: 10,
                                    chunks: 'initial', // only package third parties that are initially dependent
                                },
                                // elementUI: {
                                //   name: 'chunk-elementUI', // split elementUI into a single package
                                //   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                                //   test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                                // },
                                commons: {
                                    name: 'chunk-commons',
                                    test: resolve('src/components'), // can customize your rules
                                    minChunks: 3, //  minimum common number
                                    priority: 5,
                                    reuseExistingChunk: true,
                                },
                            },
                        });
                    config.optimization.runtimeChunk('single');
                }
            );


        // // TODO: Remove this workaround once https://github.com/vuejs/vue-cli/issues/2463 is fixed
        // // Remove preload plugins for multi-page build to prevent infinite recursion
        Object.keys(pages).forEach(page => {
            config.plugins.delete(`preload-${page}`);
            config.plugins.delete(`prefetch-${page}`);
        });
        config
            .plugin('fork-ts-checker')
            // 🔴 引进fork-ts-checker-webpack-plugin专门在一个进程中进行类型检查
            .use(require('fork-ts-checker-webpack-plugin'), [{
                // 终端 ts 是否进行提示
                silent: true,
            }]);
    },
};

[1335098094]

@xiaohaiH @kililixi 我的还是一直报runtime.js 404 的错误，好揪心

[xiaohaiH]

你在 chunks 中定义了runtime?

[1335098094]

解决了，是preload的问题，去掉就好了

[lppsuixn]

解决了，是preload的问题，去掉就好了

@1335098094 hi,请问最后怎么解决的？

[Codezero123]

解决了，是preload的问题，去掉就好了

兄弟 @1335098094 是如何解决的，求指点

[lin93h]

解决了，是preload的问题，去掉就好了

兄弟 @1335098094 是如何解决的，求指点

vue.config.js中
chainWebpack(config) {
config.plugins.delete('preload')
}