vite-plugin-vue 自定义块 Custom Blocks 实战5 步打造你的 i18n 与 front-matter 轻量流水线【免费下载链接】vite-plugin-vueVite Vue Plugins项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-vuevite-plugin-vue即vitejs/plugin-vue不仅负责编译.vue单文件组件还内置了一个强大的扩展点——自定义块Custom Blocks。它允许你在 Vue 组件里写下任意标签如i18n、frontmatter并用自己的 Vite 插件把块内容解析成数据直接挂载到组件上。本文带你从零搭建一条完整的i18n 多语言 front-matter 元数据流水线。什么是自定义块原理 30 秒看懂 一个标准的 Vue 组件包含template、script、style三种块。除此之外你写的任何顶级标签都会被识别为自定义块例如i18n langyaml en: hello: hello, vite! ja: hello: こんにちは、vite /i18n插件在编译主模块时会为每个自定义块生成一条独立的虚拟导入请求形如?vuetypei18nindex0lang.yaml。核心逻辑在 packages/plugin-vue/src/main.ts 的genCustomBlockCode函数中它 import 这个虚拟模块如果模块导出的是一个函数就直接调用它并传入组件对象_sfc_main。这就形成了一个完美的分工vitejs/plugin-vue负责切块、发起请求你自己的插件负责监听vuetypexxx请求把块内容加工成数据实战第一步编写带 i18n 块的组件参考仓库中的示例 playground/vue/CustomBlock.vuetemplate h2Custom Blocks/h2 p classcustom-block{{ t(hello) }}/p /template script function useI18n(locale en) { // 从组件对象上读取 i18n 资源由插件挂载 const instance getCurrentInstance() const resources instance.type.i18n || { en: {} } const t (key) (resources[locale] || {})[key] return { t } } export default { setup() { return { ...useI18n(ja) } }, } /script i18n langyaml en: hello: hello, vite! ja: hello: こんにちは、vite /i18n关键点脚本里通过instance.type.i18n读取数据——这个属性就是下一步的插件挂上去的。实战第二步写一个 20 行的数据加工插件完整实现见 playground/vue/CustomBlockPlugin.ts核心思路只有三件事过滤请求用/vuetypei18n/正则匹配模块 id非 i18n 块直接放行解析语言id 以.yaml结尾时用js-yaml把内容解析成 JSON挂载数据导出一个函数把解析结果赋值给Comp.i18nexport const vueI18nPlugin { name: vue-i18n, transform(code, id) { if (!/vuetypei18n/.test(id)) return if (/\.(ya)?ml$/.test(id)) { code JSON.stringify(yaml.load(code.trim())) } return export default Comp { Comp.i18n ${code} } }, }实战第三步注册插件到 Vite 配置在 playground/vue/vite.config.ts 中把两个插件按顺序注册即可plugins: [vuePlugin(), vueI18nPlugin]⚠️ 顺序无所谓但两个插件缺一不可vue()负责切块你的插件负责加工。进阶玩法用 front-matter 管理页面元数据 i18n 只是开胃菜。同样的机制可以支持博客场景的 front-matter——在组件顶部声明title、description、date等元信息frontmatter langyaml title: 我的第一篇文章 date: 2026-08-23 tags: [vue, vite] /frontmatter只需复制上面的插件骨架把typei18n改成typefrontmatter把Comp.i18n改成Comp.meta你就拥有了一个组件级元数据系统。配合文档站或博客生成器可以按需读取每个组件的标题、标签实现组件即内容的工作流。官方文档中也有同样的示例可参考 packages/plugin-vue/README.md 中 Example for transforming custom blocks 一节。自定义块的三大使用技巧 ✅用lang属性选择解析器写langyaml、langjson后请求 id 会带上lang.yaml你的插件可据此加载不同解析库支持src外部引用块标签可以写成i18n src./messages.yaml插件会自动解析源文件并关联回所属组件方便把翻译文件交给专门的团队维护导出函数而非对象返回Comp {}形式的默认导出才能拿到组件对象做挂载返回对象则只能被静态消费常见问题速查表问题原因与解法组件上取不到Comp.i18n检查插件是否导出的是函数形式的默认导出YAML 报解析错误确认已安装js-yaml依赖块没有任何效果检查 id 正则必须是vuetype你的块名HMR 时数据丢失确保 transform 每次都返回完整的新代码避免依赖旧状态总结通过 vite-plugin-vue 的Custom Blocks 自定义块机制你无需任何复杂配置仅用约 20 行插件代码就能为 Vue 组件加上 i18n 多语言或 front-matter 元数据能力。这套切块 虚拟模块 组件挂载的流水线正是 Vue 单文件组件灵活扩展性的最佳实践。如果想在本地跑起来验证效果可以先克隆仓库git clone https://gitcode.com/gh_mirrors/vi/vite-plugin-vue然后打开playground/vue目录下的示例亲眼看看こんにちは、vite是如何从 YAML 走进组件的 【免费下载链接】vite-plugin-vueVite Vue Plugins项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考