自己写个简单的vite插件

需求：根据使用环境显示对应的标题和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 html
      const 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 请求,默认4096kb
      assetsInlineLimit: 10240
    },
    plugins: [
      vue(),
      // 设置页面title和icon
      vitePluginTitleHtml({
        title: viteEnv.VITE_APP_TITLE,
        icon: '/favicon.ico'
      })
    ],
    // 配置公共样式
    css: {
      preprocessorOptions: {
        scss: {
          // 全局的scss
          additionalData: `@import "@/styles/var.scss";`
        }
      },
      // 自己修改生成的hash值名称
      modules: {
        // 配置css模块化,name是文件名,local是类名,hash是hash值
        generateScopedName: '[name]_[local]_[hash:5]'
      }
    }
  }
})