登录
首页 >  文章 >  前端

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

时间：2024-10-31 22:34:24 276浏览 收藏

学习文章要努力，但是不要急！今天的这篇文章《如何在Vue CLI项目中引入公共模板？ 》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

如何在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文件

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Header Template</title>
</head>

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

    <!-- ...其他代码 -->

<body>
    <%= htmlWebpackPlugin.options.header %>

    <div id="app"></div>

    <!-- ...其他代码 -->
</body>

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>