在vue cli项目中高效复用公共模板
Vue CLI构建的项目中，经常会遇到多个页面需要使用相同HTML结构的情况，例如页头、页脚等公共部分。重复编写这些代码不仅费时费力，而且不利于维护。本文将介绍一种方法，有效地将公共HTML模板引入Vue CLI项目中的模板文件中，从而避免代码冗余。
核心问题在于如何在Vue CLI生成的index.html文件中引入一个外部的公共HTML文件，例如一个包含页头信息的header.html文件。直接在index.html中使用
解决方案是利用vue.config.js文件和html-webpack-plugin插件（虽然问题答案中提到了，但此处不展开该插件的细节）。 我们可以通过修改Vue CLI的webpack配置，在构建过程中动态地将公共HTML文件的内容插入到index.html中。
首先，创建一个名为header.html的文件，并将需要作为公共模板的HTML代码放入public文件夹下。例如：
立即学习“前端免费学习笔记（深入）”；
我的公共页头
然后，修改vue.config.js文件，添加如下代码：
const fs = require('fs')
const header = fs.readFileSync('./public/header.html').toString()
module.exports = {
runtimeCompiler: true,
css: {
loaderOptions: {
less: {
lessOptions: {
javascriptEnabled: true
}
}
}
},
chainWebpack: (config) => {
config.plugin('html').tap((args) => {
args[0].header = header
return args
})
}
}这段代码首先读取public/header.html文件的内容，然后利用chainWebpack方法修改html-webpack-plugin的配置，将读取到的内容赋值给htmlWebpackPlugin.options.header。
最后，修改public/index.html文件，在
标签中添加，这将会在构建过程中被替换成header.html的内容：
<%= htmlWebpackPlugin.options.header %>
通过以上步骤，公共HTML模板就能被成功引入到Vue CLI项目的主模板文件中，实现代码复用，提高开发效率。 需要注意的是，这种方法依赖于html-webpack-plugin插件的默认行为，如果使用了其他的插件或自定义了构建流程，可能需要调整代码。
