Vite处理html模板插件之vite-plugin-html

这篇具有很好参考价值的文章主要介绍了Vite处理html模板插件之vite-plugin-html。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

背景:项目中需要使用模板html动态处理比如 icon 、title。我的项目里是需要在不同的打包指令下,打包的结果中index.html 中title 和 icon都不一致。之前的项目使用的是 html-webpack-plugin 插件。安装该插件的使用需要注意你项目的webpack版本,安装对应的版本插件。本次因为项目是vite项目,所以采用vite-plugin-html插件。本文作为使用记录。结尾还有个疑问一直没有解决,欢迎大神留言解答一下。


提示:以下是本篇文章正文内容,下面案例可供参考

一、项目目录

项目目录如下,主要关注红框的 html文件
Vite处理html模板插件之vite-plugin-html

二、index.html

Vite处理html模板插件之vite-plugin-html

三、vite.config.js

主要目的 是以template 值对应的 html 为模板,为其注入一些动态值。这里主要是 title、icon。

import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
  plugins: [
    createHtmlPlugin({
        minify: true,
        pages: [
          {
            filename: 'index.html',
            template: 'index.html',
            injectOptions: {
              data: {
                title: product,
                injectIcoLink: `<link rel="icon" href="${getFaviconPath()}" />`,
                pubId: pubIdObj[product],
              },
            },
          },
          {
            filename: '/legale/cookie/index.html',
            template: '/legal/cookie/index.html',
            injectOptions: {
              data: {
                title: product,
                injectIcoLink: `<link rel="icon" href="${getFaviconPath()}" />`,
                productName: product,
              },
            },
          },
          {
            filename: '/legale/privacy/index.html',
            template: '/legal/privacy/index.html',
            injectOptions: {
              data: {
                title: product,
                injectIcoLink: `<link rel="icon" href="${getFaviconPath()}" />`,
                productName: product,
              },
            },
          },
          {
            filename: '/legale/service/index.html',
            template: '/legal/service/index.html',
            injectOptions: {
              data: {
                title: product,
                injectIcoLink: `<link rel="icon" href="${getFaviconPath()}" />`,
                productName: product,
              },
            },
          },
        ],
      })
  ]
})

四、打包dist的结果

打包结果如预期,legal 整个文件夹都打到了dist 目录下,并且html 需要注入的值也都对应的注入进去了。
Vite处理html模板插件之vite-plugin-html
``

五、有个疑问

本地环境打不开 legal里的html,结果如下。但是 postman 可以获取到 html 内容。 线上生产环境也是没有问题的,可以打开页面。 欢迎大佬给出建议
Vite处理html模板插件之vite-plugin-html

Vite处理html模板插件之vite-plugin-html文章来源地址https://www.toymoban.com/news/detail-470552.html

到了这里,关于Vite处理html模板插件之vite-plugin-html的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vite+vue3.2 项目性能优化实战】打包体积分析插件rollup-plugin-visualizer视图分析

    rollup-plugin-visualizer 是一个用于Rollup构建工具的插件,它可以生成可视化的构建报告,帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。 使用 rollup-plugin-visualizer 插件,可以在构建完成后生成一个交互式的HTML报告,其中包含了构建过程中的各种统计信息,如文

    2024年02月07日
    浏览(54)
  • vite打包优化vite-plugin-compression的使用

    当前端资源过大时,服务器请求资源会比较慢。前端可以将资源通过Gzip压缩使文件体积减少大概60%左右,压缩后的文件,通过后端简单处理,浏览器可以将其正常解析出来。 如果浏览器的请求头中包含 c ontent-encoding: gzip,即证明浏览器支持该属性。 前端使用gzip压缩代码很容

    2024年02月09日
    浏览(39)
  • 挖坑记录:vite使用sass 报错:[plugin:vite:css] expected “;“.

    vite 引入sass依赖包,然后在vite.config.ts配置一下scss,这里就不详细说,不会的自行百度。 运行 yarn dev 项目 浏览器报错: 终端报错: 这时候一脸懵逼的,想着依赖包已经引入,vite.config.ts也配置了,开始以为是版本问题,或者以为是stylelint 样式约束问题。然后捣鼓了半天,

    2024年02月16日
    浏览(41)
  • 安装vite-plugin-svg-icons

    找不到合适的图标,如何使用其他的svg图标? 安装vite-plugin-svg-icons 使用svg-icon,即可使用iconfont等svg图标库 npm i vite-plugin-svg-icons npm i fast-glob 六、最后在需要的文件中使用图标 示例在面包屑组件中引用

    2024年02月14日
    浏览(39)
  • 【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积

    CDN (Content Delivery Network)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术。CDN加速的原理是,当用户请求访问某个资源时, CDN会根据用户的地理位置和网络状况,自动选择离用户最近的服务器来响应请求 。如果该服务器上已经缓存了

    2024年02月03日
    浏览(55)
  • Mock和Vite-plugin-Mock的区别是什么?

    我不知道大家和我是否有一样的疑问,之前Mock.js用的挺好,为啥又出现了一个vite-plugin-mock,而且这个插件还依赖于Mock.js.那么他的优势到底是什么呢?如果你也有这样的疑问,本文最后会给出答案解开这个谜底 我之前已经百度了好久发现讨论这个问题的人好少,只有一俩个人

    2024年02月10日
    浏览(30)
  • Cesium 3dtiles 渐变特效 vite-plugin-cesium版

    着色器程序和源的位置变了,适当修改即可。注意点:cesiumlab2和3切的3dtiles要带光照,其次cesumlab2 矢量楼快切的高度方向向量为v_positionEC.z,cesiumlab3通用模型切的高度方向为v_positionEC.y。

    2024年02月12日
    浏览(46)
  • 解决vite-plugin-eslint引入type类型报错的问题

    目前看npm包更新时间在一年前,报错原因可能是由于typescript变更导致依赖包package.json不匹配。 看了github上各个大神提出的解决方案,有点看不懂,搞了很久才大致摸索出了,所以分享下 ———————————————— 思路是使用patch-package修改vite-plugin-eslint包源文件

    2024年03月14日
    浏览(83)
  • Vue3 + Vite + Ts自己封装的基础组件库发布npm ,npm安装使用(Volar )支持TS 类型提示功能(vite-plugin-dts 使用)

    在开发Vue3 + Ts项目时:使用自己二次封装的基础组件,没有 Ts类型提示 ,不能像 Element-plus 鼠标停在标签或者属性上就能提示当前组件有哪些属性(即props)及其属性的类型,如下图是 Element-plus 组件的 使用Vs Code Volar的提示: 此插件的作用:为打包的库里加入声明文件(即生

    2024年02月09日
    浏览(68)
  • 解决报错:[plugin:vite-plugin-eslint] Failed to load config “standard“ to extend from.

    解决方案一: eslint插件没有全部安装,安装以下插件: 解决方案二: 注释.eslintrc.cjs 文件中的standard,去掉standard后可能一些eslint标准配置就失效了,建议通过方案一方式解决。

    2024年03月12日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包