Vite處理html模板插件之vite-plugin-html插件使用

更新時間：2023年10月20日 08:29:38 作者：DBAA_ws

這篇文章主要給大家介紹了關于Vite處理html模板插件之vite-plugin-html插件使用的相關資料,Vite是一個現(xiàn)代化的前端構建工具,而vite-plugin-html是Vite的一個插件,用于在構建時自動生成HTML文件,需要的朋友可以參考下

前言

背景：項目中需要使用模板html動態(tài)處理比如 icon 、title。我的項目里是需要在不同的打包指令下，打包的結果中index.html 中title 和 icon都不一致。之前的項目使用的是 html-webpack-plugin 插件。安裝該插件的使用需要注意你項目的webpack版本，安裝對應的版本插件。本次因為項目是vite項目，所以采用vite-plugin-html插件。本文作為使用記錄。結尾還有個疑問一直沒有解決，歡迎大神留言解答一下。

一、項目目錄

項目目錄如下，主要關注紅框的 html文件

二、index.html

三、vite.config.js

主要目的是以template 值對應的 html 為模板，為其注入一些動態(tài)值。這里主要是 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,
              },
            },
          },
        ],
      })
  ]
})