本文主要是介绍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",// ...}})]);},// ...
}
这篇关于Vue Cli 构建多页面应用时配置 preload 插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
