vite-plugin-meta-inject

工单编号：网站学院-All poster低代码开发平台项目-开发vite-plugin-meta-inject的vite插件任务工单

Vite 插件：构建期注入 + 运行时动态更新 HTML <title> 与 <meta> 标签。

功能

• 通过 meta.config.ts / .json / .mjs 配置页面级 SEO
• 构建期 transformIndexHtml 注入首屏 meta
• 运行时 useMetaUpdater 监听路由变化
• 支持 fallback、动态路由参数与 {{param}} 模板
• 构建期配置校验（failOnError）

安装

pnpm add -D vite-plugin-meta-inject

使用

1. 配置文件 meta.config.ts

export default {
  '/': {
    title: 'All Poster 低代码平台',
    description: '企业级低代码平台',
  },
  '/discover/material/:materialId': {
    title: '素材详情 - {{materialId}}',
    description: '查看素材详情',
  },
};

2. vite.config.ts

import metaInject from 'vite-plugin-meta-inject';

export default defineConfig({
  plugins: [
    metaInject({
      configFile: './meta.config.ts',
      fallback: { title: '默认标题', description: '默认描述' },
      enableRuntime: true,
      failOnError: true,
    }),
  ],
});

3. 运行时 Hook

import { useMetaUpdater } from 'vite-plugin-meta-inject/runtime';

function AppRouter() {
  useMetaUpdater();
  return <Routes>...</Routes>;
}

开发

pnpm install
pnpm build
pnpm test

License

MIT