如何在 Vue CLI 项目中引入公共 HTML 模板？-小浪资源网

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

vue cli 中引入公共模板

vue cli 创建的项目中，在页面中引入公共 html 代码的方法是模板模块化。

步骤：

1. 安装 html–webpack-plugin

npm install --save-dev html-webpack-plugin

登录后复制

2. 配置 vue.config.js

立即学习“前端免费学习笔记（深入）”；

在 vue.config.js 中配置 html-webpack-plugin：

const fs = require('fs') const header = fs.readFileSync('./public/header.html').toString()  module.exports = {   chAInWebpack: (config) =&gt; {     config.plugin('html').tap((args) =&gt; {       args[0].header = header        return args     })   } }

登录后复制

3. 创建公共模板文件

在 public 目录下创建包含要引入的 HTML 代码的文件，如 header.html：

         <!-- 公共头部代码 -->

登录后复制

4. 在 index.html 中引用公共模板

在 public/index.html 中引用公共模板：

   <!-- ... -->         <div id="app"></div>

登录后复制

5. 运行项目

运行 npm run serve 启动项目。此时，公共模板中的 HTML 代码将被引入到所有页面中。

文章版权归作者所有，未经允许请勿转载。【小浪云服务商 - 服务器12元起 - 挂机宝5元起】

THE END

技术分享
# AI # html # js # vue # npm # webpack # public

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

请登录后发表评论

友情链接