位置: IT常识 - 正文

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

编辑:rootadmin
Vite处理html模板插件之vite-plugin-html

推荐整理分享Vite处理html模板插件之vite-plugin-html(html visit),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:visible html,html中visited,html visit,html的visibility,html的visibility,html中visited,visible html,visible html,内容如对您有帮助,希望把文章链接给更多的朋友!

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

文章目录前言一、项目目录二、index.html三、vite.config.js四、打包dist的结果五、有个疑问前言

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

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

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

一、项目目录

项目目录如下,主要关注红框的 html文件

二、index.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 需要注入的值也都对应的注入进去了。 ``

五、有个疑问

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

本文链接地址:https://www.jiuchutong.com/zhishi/287169.html 转载请保留说明!

上一篇:uniapp项目中引入vant-Weapp(局部全局都有 史上最详细的方法)(uniapp引入bootstrap)

下一篇:伊夫城堡,法国马赛 (© Boris Stroujko/Shutterstock)(依夫城堡)

  • 华为nova3i和荣耀20青春版对比(华为nova3i和荣耀10哪个好)

    华为nova3i和荣耀20青春版对比(华为nova3i和荣耀10哪个好)

  • 闲聊提现24小时可以进账吗(闲聊提现24小时到账)

    闲聊提现24小时可以进账吗(闲聊提现24小时到账)

  • 小米笔记本插电没反应(小米笔记本插电源不充电)

    小米笔记本插电没反应(小米笔记本插电源不充电)

  • qq关联要验证码怎么办(qq关联验证码怎么关)

    qq关联要验证码怎么办(qq关联验证码怎么关)

  • 淘宝亲情账号有隐私吗(淘宝亲情账号有几个爱人)

    淘宝亲情账号有隐私吗(淘宝亲情账号有几个爱人)

  • 磁盘工具有什么(磁盘工具有什么功能)

    磁盘工具有什么(磁盘工具有什么功能)

  • 罗技接收器通用吗(罗技接收器为什么这么贵)

    罗技接收器通用吗(罗技接收器为什么这么贵)

  • 华为nova7手机怎么设置返回键(华为nova7手机怎么定位对方的手机位置)

    华为nova7手机怎么设置返回键(华为nova7手机怎么定位对方的手机位置)

  • ai源文件什么意思(ai源文件的格式又是什么)

    ai源文件什么意思(ai源文件的格式又是什么)

  • 手机ag工艺是什么(ag工艺什么意思)

    手机ag工艺是什么(ag工艺什么意思)

  • 一个营业执照可以开通几个抖音小店(一个营业执照可以认证几个抖音号)

    一个营业执照可以开通几个抖音小店(一个营业执照可以认证几个抖音号)

  • 重装系统对电脑有影响吗(重装系统对电脑影响大吗)

    重装系统对电脑有影响吗(重装系统对电脑影响大吗)

  • 显卡矿卡是什么意思(显卡矿卡的坏处)

    显卡矿卡是什么意思(显卡矿卡的坏处)

  • 华为云空间家人共享怎么用(华为云空间家人相册能看吗)

    华为云空间家人共享怎么用(华为云空间家人相册能看吗)

  • 手机上的悬浮导航有什么功能(手机上的悬浮导航怎么不在了)

    手机上的悬浮导航有什么功能(手机上的悬浮导航怎么不在了)

  • ppt不是全屏怎么设置(ppt在屏幕上不能全屏)

    ppt不是全屏怎么设置(ppt在屏幕上不能全屏)

  • 在手机上怎么打出根号这个符号(在手机上怎么打文件用什么软件)

    在手机上怎么打出根号这个符号(在手机上怎么打文件用什么软件)

  • air2能用apple pencil吗(Air2能用几年)

    air2能用apple pencil吗(Air2能用几年)

  • 爱奇艺是百度的吗(爱奇艺app官方版下载)

    爱奇艺是百度的吗(爱奇艺app官方版下载)

  • qq封号处理是什么意思(qq封号处理一般封多久)

    qq封号处理是什么意思(qq封号处理一般封多久)

  • xr只有一边有声音吗(iphonexr 一边有声音一边没声音)

    xr只有一边有声音吗(iphonexr 一边有声音一边没声音)

  • 苹果11怎么设置24小时制(苹果11怎么设置24小时到账)

    苹果11怎么设置24小时制(苹果11怎么设置24小时到账)

  • 抖音怎么把作品设置私密(抖音怎么把作品置顶)

    抖音怎么把作品设置私密(抖音怎么把作品置顶)

  • 联华充值卡网上能充吗(联华卡线上充值)

    联华充值卡网上能充吗(联华卡线上充值)

  • qq漂流瓶不能用了吗(qq漂流瓶还能用吗)

    qq漂流瓶不能用了吗(qq漂流瓶还能用吗)

  • Vue3 + Element Plus 按需引入 - 自动导入(vue3elementplus首页布局)

    Vue3 + Element Plus 按需引入 - 自动导入(vue3elementplus首页布局)

  • 分配股东利润分录
  • 消费税的计税价格是什么
  • 如何确定交易性金融资产
  • 出差误餐补助是谁承担
  • 月初没报税可以领发票吗
  • 金税四期什么时候正式上线
  • 发票商品类别有哪几种
  • 固定资产未付款怎么入账
  • 邀请客户参加公司会议
  • 固定资产大修理支出标准
  • 电子银行承兑汇票已承兑已锁定
  • 固定资产明细账怎么填
  • 公告费交了以后能否撤销
  • 小规模纳税人购置税控设备
  • 知识产权投资是什么意思
  • 土地无形资产摊销的会计处理
  • 失控发票进项税转出企业无法承担所得税怎么办
  • 收入做多增值税怎么算
  • 实收资本印花税是一年一交吗
  • 现房销售需要哪些手续
  • 金税盘抵减税款分录
  • 没有发票的固定资产可以税前扣除吗
  • 小企业处置固定资产
  • 进项税转出的会计处理
  • 仲裁委判决还能上诉吗
  • 2016年最佳歌曲
  • win11如何多窗口
  • 微软输入法打不出汉字
  • thinkphp i方法
  • 台式机装win10哪个版本好
  • 结构性存款利息增值税
  • 工程施工暂估成本的账务处理流程
  • mmc.exe是什么进程
  • 广告代理费制度
  • javaweb项目开发的原理
  • 主营业务收入借贷方向
  • 装修费还没摊销完就搬家了
  • 实战到底究竟是什么意思啊
  • pythonnetworkx
  • unity常用脚本语言
  • 功能强大的词语
  • 投资性房地产在资产负债表中的列示
  • 专用发票有几联?
  • 非货币性资产交换和债务重组的区别
  • 公司股权转移怎么办理
  • 对公账户的备用金取现额度
  • 民办非企业单位什么意思
  • 利润表中的资产处置收益应该计入营业利润还是利润总额
  • 实收资本印花税属于什么税目
  • 员工垫付款报销单
  • 动漫产业增值税率是多少
  • 销售方销售返利单独开具
  • 预付款属于什么会计分录
  • 小规模红冲发票怎么做分录
  • 付款后没有发票怎么办
  • 公司突然改变工资结构
  • 金税盘费用抵扣账务处理
  • Hibernate4在MySQL5.1以上版本创建表出错 type=InnDB
  • mysql8.0 win7
  • 卡巴斯基2019
  • 隐藏的系统
  • ubuntu上安装qt
  • sesvc.exe是什么
  • linuxzen
  • win7共享设置(详细图文步骤)
  • opengl编程实例
  • 骨头动漫头像
  • javascript模块化规范有哪些
  • jQuery Easyui datagrid连续发送两次请求问题
  • IE下href 的 BUG问题
  • js绑定函数
  • 编写批处理
  • mod兼容性
  • python嵌套列表生成
  • js设计模型
  • socket.io与pm2(cluster)集群搭配的解决方案
  • android系统虚拟机
  • 浏览器环境下的事件循环
  • 江苏省发票真伪查询网站
  • 高山白茶和普通白茶的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设