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

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

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

vue CLI创建的项目中,我们经常需要在多个页面中复用某些公共html代码。为此,可以通过htmlwebpack-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文件来引用,实现代码复用。

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容