登录
首页 >  文章 >  前端

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

时间：2024-11-02 17:45:42 212浏览 收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《如何在 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) => {
    config.plugin('html').tap((args) => {
      args[0].header = header

      return args
    })
  }
}

3. 创建公共模板文件

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

<!DOCTYPE html>
<html>
  <head>
    <!-- 公共头部代码 -->
  </head>
  <body>
  </body>
</html>

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

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

<head>
  <!-- ... -->
</head>
<body>
  <%= htmlWebpackPlugin.options.header %>

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

5. 运行项目

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

好了，本文到此结束，带大家了解了《如何在 Vue CLI 项目中引入公共 HTML 模板？ 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

相关阅读
更多>
最新阅读
更多>
  • 文章 · 前端   |  14分钟前  |  
    Leaflet弹窗管理：移出标记自动关闭技巧
    160 收藏
  • 文章 · 前端   |  23分钟前  |  
    HTML表单添加画布绘图工具的方法如下：使用<canvas>标签在HTML表单中插入<canvas>元素，用于绘制图形。<canvasid="drawingCanvas"width="500"height="300"></canvas>添加JavaScript控制绘图功能使用JavaScript监听鼠标事件（如mousedown、mousemove、
    315 收藏
  • 文章 · 前端   |  33分钟前  |  
    CSS实现表单错误样式—如何设计验证状态
    295 收藏
  • 文章 · 前端   |  46分钟前  |  
    JavaScript数组push与pop使用教程
    177 收藏
  • 文章 · 前端   |  1小时前  |  
    Angular动态输入值未更新API的解决办法
    247 收藏
  • 文章 · 前端   |  1小时前  |   proxy Object.defineProperty 发布/订阅模式 MVVM框架 JS数据绑定
    JS数据绑定原理与实现方式解析
    228 收藏
  • 文章 · 前端   |  1小时前  |   响应式设计 字体大小 媒体查询 vw单位 clamp()函数
    CSSvw单位使用教程｜字体大小实战技巧
    369 收藏
  • 文章 · 前端   |  1小时前  |  
    JavaScript多条件筛选：AND/OR逻辑动态教程
    205 收藏
  • 文章 · 前端   |  1小时前  |  
    JS创建并下载文件的方法
    443 收藏
  • 文章 · 前端   |  1小时前  |  
    事件循环阶段解析与详解
    394 收藏
  • 文章 · 前端   |  1小时前  |  
    FontAwesome图标动态切换技巧解析
    210 收藏
    • 课程推荐
    更多>