位置: 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)(依夫城堡)

  • 三代税款手续费退费申请
  • 所得税费用调增分录
  • 纳税人期末存货怎么结转
  • 缴纳去年的企业所得税怎么做账
  • 土地增值税计算题
  • 利润10万企业所得税多少
  • 进口货物退货如何退税
  • 预计净残值影响减值准备吗
  • 土地增值税清算全流程实战案例
  • 该企业本月发生如下经济业务
  • 政府给的慰问金叫什么
  • 商贸企业销售商品结转成本是手工算吗
  • 工程款支付利息依据
  • 咨询服务费记到什么科目
  • 代理进出口公司营销方式
  • 限售股所得税的优惠政策
  • 开汽车租赁发票需要什么资料?
  • 物流行业主营业务成本会计分录
  • 营改增后餐饮业税种
  • 企业购车可以一次性扣除吗
  • 公司预付的货款怎么做账
  • 公司注销固定资产如何处理
  • 增值税逾期申报流程
  • 个税0申报逾期一年
  • 其他权益工具投资交易费用计入哪里
  • 未到期的商业票据是什么
  • macqq截图快捷键 保存
  • 销售门窗并安装如何缴纳增值税
  • php 生成验证码
  • win10开机启动文件夹目录说明
  • dcom进程
  • element ui el-table
  • 企业生产经营过程中的在产品属于
  • 固定资产置换存货的账务处理
  • 招行网银专业版怎么登陆
  • php和aspnet哪个好
  • 汽车定额发票怎么填写
  • phpstudy删除
  • php remote_addr
  • 所得税季度申报表怎么填
  • 实收资本注入怎么操作
  • 帝国cms导航站模板
  • 增值税普通发票几个点
  • 循环logo
  • mysql默认存储引擎的命令
  • mongodb主从复制和副本集架构有什么联系和区别
  • sql查询表中指定数据
  • mysql中的语法
  • 认缴资本怎么填
  • 个人所得税纳税记录怎么查询
  • 以前年度损益调整账务处理分录
  • 现金支付有借款利息吗
  • 收到现金货款怎么处理
  • 注册资本认缴制度
  • 不动产出租要交什么税
  • 存根联明细怎么申报
  • 增值税普通发票怎么开
  • 法人的加油费能抵所得税吗
  • 建筑业营改增的主要内容
  • mysql通过文档读取并执行命令之快速为mysql添加多用户和数据库技巧
  • mysql 5.7.17 winx64免安装版配置方法图文教程
  • xp系统找不到搜索功能
  • Windows Server 2008网络中禁止迅雷下载
  • ubuntu里怎么装软件
  • 限制root用户远程登录
  • RHEL5 Apache+Tomcat整合,同时支持jsp与php
  • 苹果mac系统休眠怎么解除
  • 写出10个linux系统操作命令和用法
  • 解决在ios8中, cocos2dx 2.x版本里CCClippingNode没有效果的问题
  • opengl programming guide
  • node.js cookie-parser之parser.js
  • 安卓listview用法
  • meta 标签
  • android重写方法
  • 让ie运行js时提示允许阻止内容运行的解决方法
  • jquery fadein不起作用
  • android draglistview中拖动异常显示,无法移动到原先位置
  • 代扣代缴申报表哪里查询
  • 个体户是否需要缴纳企业所得税
  • 社保费是国税还是地税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设