快捷導(dǎo)航

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

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

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

前言

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

一、項(xiàng)目目錄

項(xiàng)目目錄如下，主要關(guān)注紅框的 html文件

二、index.html

三、vite.config.js

主要目的是以template 值對應(yīng)的 html 為模板，為其注入一些動(dòng)態(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,
              },
            },
          },
        ],
      })
  ]
})