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

       <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="&lt;%=%20BASE_URL%20%&gt;favicon.ico"><title>test</title><script>     </script><div id="app"></div>  
登录后复制

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

立即学习前端免费学习笔记(深入)”;

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

请登录后发表评论

    暂无评论内容