需求：根据使用环境显示对应的标题和icon

先在根目录建个plugins/vite-plugin-title-html.ts

文件内容如下:

/*** 替换html里面的标题和icon*/
type HtmlTemplate = {title?: string,icon?: string
}
export default function vitePluginHtmlTitle({ title, icon }: HtmlTemplate) {return {// 申明的插件名name: 'vite-plugin-title',// 转换 index.html 的专用钩子。钩子接收当前的 HTML 字符串和转换上下文。transformIndexHtml(html: string): string | Promise<string> {if (!title) return htmlconst reg = /<title>(.*)<\/title>/gm;const iconRegex = /<link\s+rel="icon"\s+href="([^"]+)"/i;if (icon) {const match = html.match(iconRegex)if (match) {// 有就替换html = html.replace(iconRegex,`<link rel="icon" href="${icon}"`);} else {// 如果没有找到匹配项，新增<link rel="icon" href="...">const newLink = `<link rel="icon" href="${icon}">\n</head>`html = html.replace(/<\/head>/i, newLink)}}return html.replace(reg, `<title>${title}</title>`);},};
}

在vite.config.ts里面引入自定义插件

import { ConfigEnv, defineConfig, UserConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// 手写动态设置页面的title
import vitePluginTitleHtml from './plugins/vite-plugin-title-html'
export default defineConfig((config: ConfigEnv): UserConfig => {const root = process.cwd()const viteEnv = wrapperEnv(loadEnv(config.mode, root, 'VITE_'))return {root,server: {open: viteEnv.VITE_APP_OPEN,port: viteEnv.VITE_PORT,proxy: {[viteEnv.VITE_APP_BASE_API]: {target: viteEnv.VITE_APP_API,changeOrigin: true}}},resolve: {alias: {'@': path.resolve(__dirname, 'src')},// 导入时想要省略的扩展名列表extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']},build: {outDir: 'dist',// 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求,默认4096kbassetsInlineLimit: 10240},plugins: [vue(),// 设置页面title和iconvitePluginTitleHtml({title: viteEnv.VITE_APP_TITLE,icon: '/favicon.ico'})],// 配置公共样式css: {preprocessorOptions: {scss: {// 全局的scssadditionalData: `@import "@/styles/var.scss";`}},// 自己修改生成的hash值名称modules: {// 配置css模块化,name是文件名,local是类名,hash是hash值generateScopedName: '[name]_[local]_[hash:5]'}}}
})