开发工具【免费下载链接】webgemsA curated list of resources for devs and designers. Join me on devcord.com if you are up for a chit chat :)项目地址https://gitcode.com/gh_mirrors/we/webgems点击查看免费下载导读在 webgems 这个基于 Nuxt.js 2 构建的开发资源聚合站中plugins目录承载着在 Vue 根应用挂载之前需要提前运行的 JavaScript 插件是整个项目国际化i18n能力的核心落点。本文以 plugins/README.md 为骨架结合仓库内真实的 plugins/i18n.js、nuxt.config.js 与 Vuex Store 源码带你从目录是什么到插件怎么写、怎么注册、怎么和全局状态协同完整掌握 Nuxt 插件机制的实战用法。一、plugins 目录挂载前的预处理器在 Nuxt.js 的项目结构中plugins目录有非常明确的定位。仓库中的 plugins/README.md 开宗明义地写道This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.也就是说放在plugins/目录下的 JavaScript 文件会在根 Vue.js 应用挂载之前被 Nuxt 执行。这是理解整个插件机制的关键前提当你需要在应用真正渲染页面之前完成某些初始化工作——比如注册全局组件、注入全局方法、初始化第三方库、建立国际化实例——都可以通过插件来完成。README 还特别强调了一点This directory is not required, you can delete it if you dont want to use it.plugins目录与components、layouts、store等目录一样都属于 Nuxt 的可选约定目录。如果项目不需要任何预挂载逻辑完全可以删除该目录不会影响应用的正常运行。这个约定源于 Nuxt 脚手架模板新项目会生成一组带说明文档的空目录开发者按需使用、按需删除。在 webgems 中该目录没有被删除而是被真正用了起来——里面只有一个文件 plugins/i18n.js承担了全站多语言能力的初始化职责。二、注册机制nuxt.config.js 中的 plugins 配置仅仅把文件放进plugins/目录还不够Nuxt 需要一个明确的清单来告诉框架哪些插件需要在启动时加载。这个清单就是 nuxt.config.js 中的plugins配置项plugins: [ ~/plugins/i18n.js, ],这里有几个值得注意的细节路径约定~是 Nuxt 的别名指向项目根目录因此~/plugins/i18n.js实际指向仓库根目录下的 plugins/i18n.js。数组有序plugins是一个数组Nuxt 会按照数组中的书写顺序依次执行插件。如果插件之间存在依赖关系例如 A 插件依赖 B 插件注入的能力就必须把被依赖的插件写在前面。执行时机在 Nuxt 2 中插件默认同时在**服务端SSR 渲染阶段和客户端浏览器**执行如果某个插件只想在某一侧运行可以用文件名后缀来声明——.client.js表示仅客户端执行.server.js表示仅服务端执行。webgems 的 plugins/i18n.js 没有加任何后缀意味着它会在服务端渲染与客户端渲染两侧都执行从而保证首屏 SSR 输出的 HTML 与服务端/客户端状态一致。另外从 nuxt.config.js 中还可以看到项目同时通过modules配置了nuxt-clipboard2它依赖 Nuxt 的模块机制注入$copyText能力与plugins机制互补——前者用于框架级能力扩展后者用于应用级初始化。三、实战拆解webgems 的国际化插件 plugins/i18n.jswebgems 的插件目录里只有一个文件但它完整示范了一个生产级 Nuxt 插件的标准写法。下面逐行拆解 plugins/i18n.jsimport Vue from vue import VueI18n from vue-i18n Vue.use(VueI18n) export default ({ app, store }) { // Set i18n instance on app // This way we can use it in middleware and pages asyncData/fetch app.i18n new VueI18n({ locale: store.state.locale, fallbackLocale: en, messages: { en: require(~/locales/en.json), fr: require(~/locales/fr.json), }, }) app.i18n.path (link) { if (app.i18n.locale app.i18n.fallbackLocale) { return /${link} } return /${app.i18n.locale}/${link} } }这个插件值得逐层分析1插件函数的签名Nuxt 插件的默认导出是一个函数它接收 Nuxt 注入的上下文对象。这里通过解构取出了两个关键成员appNuxt 的根 Vue 实例或应用实例插件通常会把自定义能力挂载到它上面供页面、中间件等各处使用storeVuex Store 实例插件可以读取全局状态。代码注释也说明了设计意图把 i18n 实例挂到app上之后中间件middleware和页面里的 asyncData/fetch 都能拿到它这是选择挂在app而不是某个组件上的根本原因。2语言与回退策略locale: store.state.locale, fallbackLocale: en,当前语言直接取自 Vuex 全局状态store.state.locale——语言选择的唯一事实来源放在 Store 里插件初始化时读取它。回退语言fallbackLocale固定为en当某个语言缺少对应翻译条目时vue-i18n 会自动回退到英文避免页面出现空白文案。3消息字典的加载messages: { en: require(~/locales/en.json), fr: require(~/locales/fr.json), },消息字典通过require直接引入 locales/en.json 和 locales/fr.json 两个 JSON 文件。仓库中实际上还存在第三个语言文件 locales/de.json德语而插件初始化时并未注册de——这一点从源码可以明确看到也是一个值得注意的实现细节语言文件存在 ≠ 语言已启用未在messages中注册的语言会直接落到fallbackLocale回退逻辑上。4自定义路径助手app.i18n.path插件还在 i18n 实例上扩展了一个path方法用于生成带语言前缀的 URL当前语言是默认语言en时路径不带前缀例如/html当前语言不是默认语言时路径自动带上语言前缀例如/fr/html。app.i18n.path (link) { if (app.i18n.locale app.i18n.fallbackLocale) { return /${link} } return /${app.i18n.locale}/${link} }这种默认语言不占 URL 前缀、非默认语言加前缀的 URL 设计是国际化站点常见的 SEO 友好做法。从 components/Sidebar.vue 中可以看到它的预期用法曾被保留在注释里//- nuxt-link(:to$i18n.path(category.slug)) {{ category.title }} nuxt-link(:tocategory.slug) {{ category.title }}侧边栏最终启用了不带语言前缀的category.slug写法而$i18n.path作为已经注入到app.i18n上的能力随时可以在需要多语言路由时重新启用。四、插件与 Vuex 协同语言状态从哪里来app.i18n的初始语言取自store.state.locale而这一状态的家在 store/store.jsexport const state () ({ locales: [en, fr, de], locale: en, }) export const mutations { SET_LANG(state, locale) { if (state.locales.indexOf(locale) ! -1) { state.locale locale } }, }这里有两个要点受支持语言清单locales定义了应用允许切换的语言集合en、fr、de三种。受控切换SET_LANG变更函数在提交前会校验目标语言是否在locales清单中不在清单内的语言会被静默拒绝——这保证了state.locale始终是合法值进而保证 plugins/i18n.js 初始化时读取到的语言一定是受支持的。与之对照的是 store/index.js它是脚手架生成的空 Store 模块说明 Vuex 的模块化结构是按业务拆分到data.js、Sidebar.js、store.js等文件的。语言状态与插件实例之间的数据流可以概括为用户切换语言 →SET_LANG变更store.state.locale→ 插件初始化或重新创建实例时读取该值 →app.i18n.locale生效 → 页面文案与 URL 前缀随之变化五、语言文件插件加载的翻译字典plugins/i18n.js通过require(~/locales/*.json)加载的字典文件位于 locales/ 目录结构非常简单locales/en.json —— 英文插件中同时被指定为fallbackLocalelocales/fr.json —— 法文已在插件中注册locales/de.json —— 德文文件存在但插件未注册。以 locales/en.json 为例其内容为{ general: { siteTitle: What is webgems? } }德语版本则为{ general: { siteTitle: Was ist webgems? } }字典按命名空间general.键siteTitle组织对应 vue-i18n 的嵌套消息结构。需要新增语言时流程是在 locales/ 新建语言 JSON → 在 store/store.js 的locales清单中加入该语言 → 在 plugins/i18n.js 的messages中require该文件。缺少任意一环都会导致文件存在但功能未生效。六、编写 Nuxt 插件的通用规范基于 webgems 的 i18n 插件可以总结出 Nuxt 2 插件机制的一组通用规范要点说明webgems 中的对应实现默认导出函数插件文件默认导出接收上下文对象的函数export default ({ app, store }) { ... }见 plugins/i18n.js注册清单在 nuxt.config.js 的plugins数组中声明plugins: [~/plugins/i18n.js]能力挂载点把可复用能力挂到app或Vue.prototype上app.i18n new VueI18n({...})执行端控制通过.client.js/.server.js后缀限定执行端i18n 插件无后缀双端执行依赖第三方库在插件内import并Vue.use()完成安装Vue.use(VueI18n)读取全局状态通过上下文中的store访问 Vuexlocale: store.state.locale常见插件场景包括全局事件总线、剪贴板/通知等浏览器 API 封装、第三方 SDK 初始化、全局过滤器与指令注册、以及本文主角——国际化实例的建立。webgems 项目中还有一处与插件互补的模块化能力nuxt-clipboard2通过modules注入$copyText在 pages/_category.vue 和 pages/search.vue 中被用来一键复制资源链接说明模块扩展能力 插件做初始化是 Nuxt 应用常见的分工方式。七、验证与调试要验证插件是否生效可以从三个层面观察构建日志执行npm run dev或npm run build脚本定义见 package.json时Nuxt 会加载plugins数组中声明的所有插件插件文件存在语法错误时启动阶段就会报错。服务端输出因为 plugins/i18n.js 未限定执行端SSR 渲染时它同样运行可以通过服务端日志确认app.i18n是否成功实例化。页面行为将 components/Sidebar.vue 中被注释的$i18n.path(category.slug)用法重新启用切换语言后观察导航链接是否自动带上/fr等语言前缀即可直观验证path助手。需要提醒的是修改插件后必须重启 dev server 或重新构建才能生效——Nuxt 的plugins清单在启动时一次性加载热更新不会重新注册插件。八、小结webgems 用最小但完整的示例展示了 Nuxt 插件机制的完整闭环目录定位挂载前运行→ 清单注册nuxt.config.js→ 插件实现初始化 vue-i18n 并挂载到 app→ 状态协同读取 Vuex 语言状态→ 字典加载locales JSON→ 组件消费$i18n.path 路由助手。对于任何希望在自己的 Nuxt 应用中做国际化、全局初始化或能力注入的开发者仓库中的 plugins/i18n.js 与 nuxt.config.js 就是一份可以直接照抄并改造的参考实现而 plugins/README.md 所强调的目录可选、按需使用则提醒我们保持克制——只有真正需要在应用挂载前执行的逻辑才值得放进这个目录。赞分享开发工具【免费下载链接】webgemsA curated list of resources for devs and designers. Join me on devcord.com if you are up for a chit chat :)项目地址https://gitcode.com/gh_mirrors/we/webgems点击查看免费下载相关推荐Nuxt.js国际化插件i18n使用指南Nuxt.js国际化插件i18n使用指南 项目介绍 Nuxt.js 的 nuxtjs/i18n 模块是为基于 Vue 和 Nuxt.js 构建的应用程序提供国all-in-rag 混合检索实战用 Milvus 融合稀疏向量与密集向量突破单一检索的局限all in rag 混合检索实战用 Milvus 融合稀疏向量与密集向量突破单一检索的局限 本篇指南聚焦于 all in rag 项目中 RAG 检索增强示例工程教程人工智能大模型RAGBlueOcean插件国际化(i18n)实现详解BlueOcean插件国际化 i18n 实现详解 前言 在Jenkins生态系统中BlueOcean插件作为现代化的用户界面其国际化支持对于全球用户至关重要上一篇如何把 Poetry 的 poetry-check 与 poetry-lock 接入 pre-commit 钩子下一篇NodeGui 图像转换标志ImageConversionFlag枚举完全指南QImage 与 QPixmap 转换行为控制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/15 2:17:25 · 阅读 1.2k webgems 的 Nuxt.js 插件目录实战：从 plugins/README 到 i18n 国际化插件
开发工具【免费下载链接】webgemsA curated list of resources for devs and designers. Join me on devcord.com if you are up for a chit chat :)项目地址https://gitcode.com/gh_mirrors/we/webgems点击查看免费下载导读在 webgems 这个基于 Nuxt.js 2 构建的开发资源聚合站中plugins目录承载着在 Vue 根应用挂载之前需要提前运行的 JavaScript 插件是整个项目国际化i18n能力的核心落点。本文以 plugins/README.md 为骨架结合仓库内真实的 plugins/i18n.js、nuxt.config.js 与 Vuex Store 源码带你从目录是什么到插件怎么写、怎么注册、怎么和全局状态协同完整掌握 Nuxt 插件机制的实战用法。一、plugins 目录挂载前的预处理器在 Nuxt.js 的项目结构中plugins目录有非常明确的定位。仓库中的 plugins/README.md 开宗明义地写道This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.也就是说放在plugins/目录下的 JavaScript 文件会在根 Vue.js 应用挂载之前被 Nuxt 执行。这是理解整个插件机制的关键前提当你需要在应用真正渲染页面之前完成某些初始化工作——比如注册全局组件、注入全局方法、初始化第三方库、建立国际化实例——都可以通过插件来完成。README 还特别强调了一点This directory is not required, you can delete it if you dont want to use it.plugins目录与components、layouts、store等目录一样都属于 Nuxt 的可选约定目录。如果项目不需要任何预挂载逻辑完全可以删除该目录不会影响应用的正常运行。这个约定源于 Nuxt 脚手架模板新项目会生成一组带说明文档的空目录开发者按需使用、按需删除。在 webgems 中该目录没有被删除而是被真正用了起来——里面只有一个文件 plugins/i18n.js承担了全站多语言能力的初始化职责。二、注册机制nuxt.config.js 中的 plugins 配置仅仅把文件放进plugins/目录还不够Nuxt 需要一个明确的清单来告诉框架哪些插件需要在启动时加载。这个清单就是 nuxt.config.js 中的plugins配置项plugins: [ ~/plugins/i18n.js, ],这里有几个值得注意的细节路径约定~是 Nuxt 的别名指向项目根目录因此~/plugins/i18n.js实际指向仓库根目录下的 plugins/i18n.js。数组有序plugins是一个数组Nuxt 会按照数组中的书写顺序依次执行插件。如果插件之间存在依赖关系例如 A 插件依赖 B 插件注入的能力就必须把被依赖的插件写在前面。执行时机在 Nuxt 2 中插件默认同时在**服务端SSR 渲染阶段和客户端浏览器**执行如果某个插件只想在某一侧运行可以用文件名后缀来声明——.client.js表示仅客户端执行.server.js表示仅服务端执行。webgems 的 plugins/i18n.js 没有加任何后缀意味着它会在服务端渲染与客户端渲染两侧都执行从而保证首屏 SSR 输出的 HTML 与服务端/客户端状态一致。另外从 nuxt.config.js 中还可以看到项目同时通过modules配置了nuxt-clipboard2它依赖 Nuxt 的模块机制注入$copyText能力与plugins机制互补——前者用于框架级能力扩展后者用于应用级初始化。三、实战拆解webgems 的国际化插件 plugins/i18n.jswebgems 的插件目录里只有一个文件但它完整示范了一个生产级 Nuxt 插件的标准写法。下面逐行拆解 plugins/i18n.jsimport Vue from vue import VueI18n from vue-i18n Vue.use(VueI18n) export default ({ app, store }) { // Set i18n instance on app // This way we can use it in middleware and pages asyncData/fetch app.i18n new VueI18n({ locale: store.state.locale, fallbackLocale: en, messages: { en: require(~/locales/en.json), fr: require(~/locales/fr.json), }, }) app.i18n.path (link) { if (app.i18n.locale app.i18n.fallbackLocale) { return /${link} } return /${app.i18n.locale}/${link} } }这个插件值得逐层分析1插件函数的签名Nuxt 插件的默认导出是一个函数它接收 Nuxt 注入的上下文对象。这里通过解构取出了两个关键成员appNuxt 的根 Vue 实例或应用实例插件通常会把自定义能力挂载到它上面供页面、中间件等各处使用storeVuex Store 实例插件可以读取全局状态。代码注释也说明了设计意图把 i18n 实例挂到app上之后中间件middleware和页面里的 asyncData/fetch 都能拿到它这是选择挂在app而不是某个组件上的根本原因。2语言与回退策略locale: store.state.locale, fallbackLocale: en,当前语言直接取自 Vuex 全局状态store.state.locale——语言选择的唯一事实来源放在 Store 里插件初始化时读取它。回退语言fallbackLocale固定为en当某个语言缺少对应翻译条目时vue-i18n 会自动回退到英文避免页面出现空白文案。3消息字典的加载messages: { en: require(~/locales/en.json), fr: require(~/locales/fr.json), },消息字典通过require直接引入 locales/en.json 和 locales/fr.json 两个 JSON 文件。仓库中实际上还存在第三个语言文件 locales/de.json德语而插件初始化时并未注册de——这一点从源码可以明确看到也是一个值得注意的实现细节语言文件存在 ≠ 语言已启用未在messages中注册的语言会直接落到fallbackLocale回退逻辑上。4自定义路径助手app.i18n.path插件还在 i18n 实例上扩展了一个path方法用于生成带语言前缀的 URL当前语言是默认语言en时路径不带前缀例如/html当前语言不是默认语言时路径自动带上语言前缀例如/fr/html。app.i18n.path (link) { if (app.i18n.locale app.i18n.fallbackLocale) { return /${link} } return /${app.i18n.locale}/${link} }这种默认语言不占 URL 前缀、非默认语言加前缀的 URL 设计是国际化站点常见的 SEO 友好做法。从 components/Sidebar.vue 中可以看到它的预期用法曾被保留在注释里//- nuxt-link(:to$i18n.path(category.slug)) {{ category.title }} nuxt-link(:tocategory.slug) {{ category.title }}侧边栏最终启用了不带语言前缀的category.slug写法而$i18n.path作为已经注入到app.i18n上的能力随时可以在需要多语言路由时重新启用。四、插件与 Vuex 协同语言状态从哪里来app.i18n的初始语言取自store.state.locale而这一状态的家在 store/store.jsexport const state () ({ locales: [en, fr, de], locale: en, }) export const mutations { SET_LANG(state, locale) { if (state.locales.indexOf(locale) ! -1) { state.locale locale } }, }这里有两个要点受支持语言清单locales定义了应用允许切换的语言集合en、fr、de三种。受控切换SET_LANG变更函数在提交前会校验目标语言是否在locales清单中不在清单内的语言会被静默拒绝——这保证了state.locale始终是合法值进而保证 plugins/i18n.js 初始化时读取到的语言一定是受支持的。与之对照的是 store/index.js它是脚手架生成的空 Store 模块说明 Vuex 的模块化结构是按业务拆分到data.js、Sidebar.js、store.js等文件的。语言状态与插件实例之间的数据流可以概括为用户切换语言 →SET_LANG变更store.state.locale→ 插件初始化或重新创建实例时读取该值 →app.i18n.locale生效 → 页面文案与 URL 前缀随之变化五、语言文件插件加载的翻译字典plugins/i18n.js通过require(~/locales/*.json)加载的字典文件位于 locales/ 目录结构非常简单locales/en.json —— 英文插件中同时被指定为fallbackLocalelocales/fr.json —— 法文已在插件中注册locales/de.json —— 德文文件存在但插件未注册。以 locales/en.json 为例其内容为{ general: { siteTitle: What is webgems? } }德语版本则为{ general: { siteTitle: Was ist webgems? } }字典按命名空间general.键siteTitle组织对应 vue-i18n 的嵌套消息结构。需要新增语言时流程是在 locales/ 新建语言 JSON → 在 store/store.js 的locales清单中加入该语言 → 在 plugins/i18n.js 的messages中require该文件。缺少任意一环都会导致文件存在但功能未生效。六、编写 Nuxt 插件的通用规范基于 webgems 的 i18n 插件可以总结出 Nuxt 2 插件机制的一组通用规范要点说明webgems 中的对应实现默认导出函数插件文件默认导出接收上下文对象的函数export default ({ app, store }) { ... }见 plugins/i18n.js注册清单在 nuxt.config.js 的plugins数组中声明plugins: [~/plugins/i18n.js]能力挂载点把可复用能力挂到app或Vue.prototype上app.i18n new VueI18n({...})执行端控制通过.client.js/.server.js后缀限定执行端i18n 插件无后缀双端执行依赖第三方库在插件内import并Vue.use()完成安装Vue.use(VueI18n)读取全局状态通过上下文中的store访问 Vuexlocale: store.state.locale常见插件场景包括全局事件总线、剪贴板/通知等浏览器 API 封装、第三方 SDK 初始化、全局过滤器与指令注册、以及本文主角——国际化实例的建立。webgems 项目中还有一处与插件互补的模块化能力nuxt-clipboard2通过modules注入$copyText在 pages/_category.vue 和 pages/search.vue 中被用来一键复制资源链接说明模块扩展能力 插件做初始化是 Nuxt 应用常见的分工方式。七、验证与调试要验证插件是否生效可以从三个层面观察构建日志执行npm run dev或npm run build脚本定义见 package.json时Nuxt 会加载plugins数组中声明的所有插件插件文件存在语法错误时启动阶段就会报错。服务端输出因为 plugins/i18n.js 未限定执行端SSR 渲染时它同样运行可以通过服务端日志确认app.i18n是否成功实例化。页面行为将 components/Sidebar.vue 中被注释的$i18n.path(category.slug)用法重新启用切换语言后观察导航链接是否自动带上/fr等语言前缀即可直观验证path助手。需要提醒的是修改插件后必须重启 dev server 或重新构建才能生效——Nuxt 的plugins清单在启动时一次性加载热更新不会重新注册插件。八、小结webgems 用最小但完整的示例展示了 Nuxt 插件机制的完整闭环目录定位挂载前运行→ 清单注册nuxt.config.js→ 插件实现初始化 vue-i18n 并挂载到 app→ 状态协同读取 Vuex 语言状态→ 字典加载locales JSON→ 组件消费$i18n.path 路由助手。对于任何希望在自己的 Nuxt 应用中做国际化、全局初始化或能力注入的开发者仓库中的 plugins/i18n.js 与 nuxt.config.js 就是一份可以直接照抄并改造的参考实现而 plugins/README.md 所强调的目录可选、按需使用则提醒我们保持克制——只有真正需要在应用挂载前执行的逻辑才值得放进这个目录。赞分享开发工具【免费下载链接】webgemsA curated list of resources for devs and designers. Join me on devcord.com if you are up for a chit chat :)项目地址https://gitcode.com/gh_mirrors/we/webgems点击查看免费下载相关推荐Nuxt.js国际化插件i18n使用指南Nuxt.js国际化插件i18n使用指南 项目介绍 Nuxt.js 的 nuxtjs/i18n 模块是为基于 Vue 和 Nuxt.js 构建的应用程序提供国all-in-rag 混合检索实战用 Milvus 融合稀疏向量与密集向量突破单一检索的局限all in rag 混合检索实战用 Milvus 融合稀疏向量与密集向量突破单一检索的局限 本篇指南聚焦于 all in rag 项目中 RAG 检索增强示例工程教程人工智能大模型RAGBlueOcean插件国际化(i18n)实现详解BlueOcean插件国际化 i18n 实现详解 前言 在Jenkins生态系统中BlueOcean插件作为现代化的用户界面其国际化支持对于全球用户至关重要上一篇如何把 Poetry 的 poetry-check 与 poetry-lock 接入 pre-commit 钩子下一篇NodeGui 图像转换标志ImageConversionFlag枚举完全指南QImage 与 QPixmap 转换行为控制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考