Vite處理html模板插件之vite-plugin-html插件使用
前言
背景：項目中需要使用模板html動態(tài)處理比如 icon 、title。我的項目里是需要在不同的打包指令下，打包的結(jié)果中index.html 中title 和 icon都不一致。之前的項目使用的是 html-webpack-plugin 插件。安裝該插件的使用需要注意你項目的webpack版本，安裝對應(yīng)的版本插件。本次因為項目是vite項目，所以采用vite-plugin-html插件。本文作為使用記錄。結(jié)尾還有個疑問一直沒有解決，歡迎大神留言解答一下。
一、項目目錄
項目目錄如下，主要關(guān)注紅框的 html文件
二、index.html
三、vite.config.js
主要目的 是以template 值對應(yīng)的 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,
},
},
},
],
})
]
})
四、打包dist的結(jié)果
打包結(jié)果如預(yù)期，legal 整個文件夾都打到了dist 目錄下，并且html 需要注入的值也都對應(yīng)的注入進去了。
五、有個疑問
本地環(huán)境打不開 legal里的html，結(jié)果如下。但是 postman 可以獲取到 html 內(nèi)容。 線上生產(chǎn)環(huán)境也是沒有問題的，可以打開頁面。 歡迎大佬給出建議。
總結(jié)
到此這篇關(guān)于Vite處理html模板插件之vite-plugin-html插件使用的文章就介紹到這了,更多相關(guān)Vite vite-plugin-html插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中的filter與directive的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要介紹了如何構(gòu)建一個Vue插件并生成npm包，幫助大家更好的理解和使用vue，方便以后的開發(fā)，感興趣的朋友可以了解下2020-10-10
這篇文章將給大家詳細(xì)介紹了vue3如何通過canvas實現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價值,感興趣的小伙伴快來跟隨小編一起學(xué)習(xí)一下吧2023-12-12
微信小程序地圖導(dǎo)航功能實現(xiàn)完整源代碼附效果圖（推薦）
這篇文章主要介紹了微信小程序地圖導(dǎo)航功能實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue使用websocket實現(xiàn)實時數(shù)據(jù)推送功能
詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化
vue+element-ui實現(xiàn)頭部導(dǎo)航欄組件
Vue.js綁定HTML class數(shù)組語法錯誤的原因分析