如何在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文件来引用，实现代码复用。

以上就是如何在Vue CLI项目中引入公共模板？的详细内容，更多请关注www.sxiaw.com其它相关文章！