如何在Vue CLI项目中引入公共模板？

vue cli模板内引入公共模板的解决方法

在vue CLI创建的项目中，我们经常需要在多个页面中复用某些公共html代码。为此，可以通过html–webpack-plugin将这些公共部分提取为独立的模板文件。

配置步骤：

1. 安装html-webpack-plugin

   npm install --dev html-webpack-plugin

   登录后复制

2. 在vue.config.js中进行配置

   立即学习“前端免费学习笔记（深入）”；

   const fs = require('fs');  const header = fs.readFileSync('./public/header.html').toString();  module.exports = {     // 其他配置项...      chAInWebpack: (config) => {         config.plugin('html').tap((args) => {             args[0].header = header;              return args;         });     } };

   登录后复制

3. 创建/public/header.html文件

          <meta charset="utf-8"><title>Header Template</title>

   登录后复制

4. 在/public/index.html文件中引入header.html

   <!-- ...其他代码 -->             <div id="app"></div>      <!-- ...其他代码 --> 

   登录后复制

完成以上步骤后，公共HTML代码即可通过header.html文件来引用，实现代码复用。