Vue Cli 构建多页面应用时配置 preload 插件

本文主要是介绍Vue Cli 构建多页面应用时配置 preload 插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue CLI 可以通过在 vue.config.js 文件下配置 pages 进行多入口打包配置，实现多页面应用开发。

多页面模式下如果要修改插件配置，可能会出现一些问题，常见的就是 preload-webpack-plugin 插件。

配置示例：

// vue.config.js
module.exports = {pages: {pc: {/*...*/},h5: {/*...*/}},chainWebpack(config) {config.plugin("preload").tap(() => [{rel: "preload",//...}]);},// ...
}

这样打包的时候会报错：

Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use(<Plugin>) first.

原因是 config.plugin("preload") 并没有获取到名为 preload 的插件实例。

官方提示：

当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。如果你试图修改这些插件的选项，请确认运行 vue inspect。

删除了插件配置，使用 vue inspect 查看 webpack 配置，原来多页面模式下，Vue Cli 分别配置了与页面相同数量的插件配置：

{plugins: [//...// 2 个 html-webpack-plugin 配置/* config.plugin('html-h5') */new HtmlWebpackPlugin(/*...*/),/* config.plugin('html-pc') */new HtmlWebpackPlugin(/*...*/)// 2 个 preload-webpack-plugin 的 preload 配置/* config.plugin('preload-h5') */new PreloadPlugin({rel: 'preload',/*...*/})/* config.plugin('preload-pc') */new PreloadPlugin({rel: 'preload',/*...*/})// 2 个 preload-webpack-plugin 的 prefetch 配置/* config.plugin('preload-h5') */new PreloadPlugin({rel: 'prefetch',/*...*/})/* config.plugin('preload-pc') */new PreloadPlugin({rel: 'prefetch',/*...*/})]
}

注释中也标注了获取插件实例的标识是 preload-h5 和 preload-pc，而不是 preload。

所以只需使用新的标识进行配置即可：

// vue.config.js
const pages = {pc: {/*...*/},h5: {/*...*/}
}
module.exports = {pages: pages,chainWebpack(config) {Objects.keys(pages).forEach(name => {config.plugin(`preload-${name}`).tap(() => [{rel: "preload",// ...}})]);},// ...
}