如何使用 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

    <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="<%=%20BASE_URL%20%>favicon.ico"><title>test</title><script>
    </script><div id="app"></div>

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

以上就是如何使用 Vue CLI 在多个页面中引入公共模板？的详细内容，更多请关注其它相关文章！