Modify, add, delete Metadata in the head element.
npm i vite-plugin-head
// vite.config.ts
import VitePluginHead from "vite-plugin-head"
plugins: [
VitePluginHead({
cssPreload: true
})
]interface IVitePluginHeadOption {
cssPreload?: boolean;
title?: string;
transformLink?: TransformLinkHook;
}
/**
* add,remove,update attrs for yourself.
*/
type TransformLinkHook = (attrs: IAttr, href: string | undefined) => IAttr;Configure link href css file rel as preload.
<link rel="stylesheet" href="/assets/index/index-8df8383a.css">transform html after.
<link rel="preload" href="/assets/index/index-8df8383a.css">Configure title for html.
<link rel="stylesheet" href="/assets/index/index-8df8383a.css">transform html after.
<title>Hello World</title>
<link rel="preload" href="/assets/index/index-8df8383a.css">Configure hook for html.
pluginHead({
transformLink(attrs) {
attrs['title'] = "English HTML";
attrs['rel'] = "preload";
return attrs;
}
})<link rel="stylesheet" href="/assets/index/index-8df8383a.css">transform html after.
<link rel="preload" title="English HTML" href="/assets/index/index-8df8383a.css">