快捷導(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版本，安裝對(duì)應(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 值對(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è)疑問

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

總結(jié)

到此這篇關(guān)于Vite處理html模板插件之vite-plugin-html插件使用的文章就介紹到這了,更多相關(guān)Vite vite-plugin-html插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: