登录
首页 >  文章 >  前端

如何使用 Vue CLI 在多个页面中引入公共模板?

时间:2024-11-13 14:28:01 201浏览 收藏

亲爱的编程学习爱好者,如果你点开了这篇文章,说明你对《如何使用 Vue CLI 在多个页面中引入公共模板? 》很感兴趣。本篇文章就来给大家详细解析一下,主要介绍一下,希望所有认真读完的童鞋们,都有实质性的提高。

如何使用 Vue CLI 在多个页面中引入公共模板?

vue cli template 中引入公共模板

使用 vue cli 生成的项目中,可以在图示区域引入外部包含 HTML 的文件,从而提取多页面之间的公共代码。以下是具体配置方法:

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/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>test</title>
    <script>
    </script>
</head>
<body>
    <%= htmlWebpackPlugin.options.header %>
    <div id="app"></div>
</body>
</html>

这样,就可以在 Vue.js 组件中引入外部 HTML 文件作为公共模板,实现代码复用。

本篇关于《如何使用 Vue CLI 在多个页面中引入公共模板? 》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!

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