提示：文章寫(xiě)完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔

前言

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

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、項(xiàng)目目錄

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

二、index.html

三、vite.config.js

主要目的 是以template 值對(duì)應(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,
              },
            },
          },
        ],
      })
  ]
})

四、打包dist的結(jié)果

打包結(jié)果如預(yù)期，legal 整個(gè)文件夾都打到了dist 目錄下，并且html 需要注入的值也都對(duì)應(yīng)的注入進(jìn)去了。

``

五、有個(gè)疑問(wèn)

本地環(huán)境打不開(kāi) legal里的html，結(jié)果如下。但是 postman 可以獲取到 html 內(nèi)容。 線上生產(chǎn)環(huán)境也是沒(méi)有問(wèn)題的，可以打開(kāi)頁(yè)面。 歡迎大佬給出建議。

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-470552.html

到了這里，關(guān)于Vite處理html模板插件之vite-plugin-html的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！