使用您最喜欢的AI助手总结文档,并引用此页面和AI提供商
通过将 Intlayer MCP 服务器集成到您的 AI 助手,您可以直接从 ChatGPT、DeepSeek、Cursor、VSCode 等获取所有文档。
查看 MCP 服务器文档此页面的内容已使用 AI 翻译。
查看英文原文的最新版本如果您有改善此文档的想法,请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接复制文档 Markdown 到剪贴板
使用 Intlayer 和 Nuxt 开始国际化(i18n)
请参阅 GitHub 上的应用模板。
什么是 Intlayer?
Intlayer 是一个创新的开源国际化(i18n)库,旨在简化现代 Web 应用中的多语言支持。
使用 Intlayer,您可以:
- 通过组件级声明式字典轻松管理翻译。
- 动态本地化元数据、路由和内容。
- 确保 TypeScript 支持,通过自动生成的类型提升自动补全和错误检测。
- 享受高级功能,如动态语言环境检测和切换。
在 Nuxt 应用中设置 Intlayer 的分步指南
第一步:安装依赖
使用 npm 安装所需的包:
复制代码到剪贴板
npm install intlayer vue-intlayernpm install --save-dev nuxt-intlayer
intlayer
vue-intlayer 将 Intlayer 集成到 Vue 应用中的包。它为 Vue 组件提供了组合式函数。
nuxt-intlayer 集成 Intlayer 与 Nuxt 应用的 Nuxt 模块。它提供自动设置、用于语言环境检测的中间件、Cookie 管理和 URL 重定向。
第 2 步:配置您的项目
创建一个配置文件来配置您应用的语言:
复制代码到剪贴板
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // 您的其他语言环境 ], defaultLocale: Locales.ENGLISH, }, content: { contentDir: ["."], // 因为默认情况下 Intlayer 会监视来自 `./src` 目录的内容声明文件 },};export default config;
通过此配置文件,您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表,请参阅配置文档。
第3步:在您的 Nuxt 配置中集成 Intlayer
将 intlayer 模块添加到您的 Nuxt 配置中:
复制代码到剪贴板
import { defineNuxtConfig } from "nuxt/config";export default defineNuxtConfig({ // ... 您现有的 Nuxt 配置 modules: ["nuxt-intlayer"],});
nuxt-intlayer 模块会自动处理 Intlayer 与 Nuxt 的集成。它设置内容声明的构建,监控开发模式下的文件,提供用于语言环境检测的中间件,并管理本地化路由。
第4步:声明您的内容
创建并管理您的内容声明以存储翻译:
复制代码到剪贴板
import { t, type Dictionary } from "intlayer";const helloWorldContent = { key: "helloworld", content: { count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }), edit: t({ en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR", fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR", es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR", }), checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }), nuxtIntlayer: t({ en: "Nuxt Intlayer documentation", fr: "Documentation de Nuxt Intlayer", es: "Documentación de Nuxt Intlayer", }), learnMore: t({ en: "Learn more about Nuxt in the ", fr: "En savoir plus sur Nuxt dans la ", es: "Aprenda más sobre Nuxt en la ", }), nuxtDocs: t({ en: "Nuxt Documentation", fr: "Documentation Nuxt", es: "Documentación de Nuxt", }), readTheDocs: t({ en: "Click on the Nuxt logo to learn more", fr: "Cliquez sur le logo Nuxt pour en savoir plus", es: "Haga clic en el logotipo de Nuxt para obtener más información", }), },} satisfies Dictionary;export default helloWorldContent;
您的内容声明可以定义在应用程序的任何位置,只要它们包含在 contentDir 目录中(默认是 ./src),并且匹配内容声明文件的扩展名(默认是 .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx})。
更多详情,请参阅 内容声明文档。
第5步:在代码中使用 Intlayer
在整个 Nuxt 应用中,使用 useIntlayer 组合函数访问您的内容字典:
复制代码到剪贴板
<script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({ msg: String,});const { count, edit, checkOut, nuxtIntlayer, learnMore, nuxtDocs, readTheDocs,} = useIntlayer("helloworld");const countRef = ref(0);</script><template> <h1>{{ msg }}</h1> <div class="card"> <button type="button" @click="countRef++"> <count /> {{ countRef }} </button> <p v-html="edit"></p> </div> <p> <checkOut /> <a href="https://nuxt.com/docs/getting-started/introduction" target="_blank" >Nuxt</a >,<nuxtIntlayer /> </p> <p> <learnMore /> <a href="https://nuxt.com" target="_blank"><nuxtDocs /></a>。 </p> <p class="read-the-docs"><readTheDocs /></p> <p class="read-the-docs">{{ readTheDocs }}</p></template>
在 Intlayer 中访问内容
Intlayer 提供了多种 API 来访问您的内容:
基于组件的语法(推荐): 使用 <myContent /> 或 <Component :is="myContent" /> 语法将内容渲染为 Intlayer 节点。这与可视化编辑器和内容管理系统(CMS)无缝集成。
基于字符串的语法: 使用 {{ myContent }} 将内容渲染为纯文本,不支持可视化编辑器。
原始 HTML 语法: 使用 <div v-html="myContent" /> 将内容渲染为原始 HTML,不支持可视化编辑器。
- 解构语法: useIntlayer 组合式函数返回一个带有内容的 Proxy。这个 Proxy 可以被解构以访问内容,同时保持响应性。
- 使用 const content = useIntlayer("myContent"); 和 {{ content.myContent }} / <content.myContent />。
- 或者使用 const { myContent } = useIntlayer("myContent"); 和 {{ myContent }} / <myContent/> 来解构内容。
(可选)步骤 6:更改内容的语言
要更改内容的语言,可以使用 useLocale 组合式函数提供的 setLocale 函数。该函数允许你设置应用的语言环境并相应地更新内容。
创建一个用于切换语言的组件:
复制代码到剪贴板
<template> <div class="locale-switcher"> <select v-model="selectedLocale" @change="changeLocale"> <option v-for="loc in availableLocales" :key="loc" :value="loc"> {{ getLocaleName(loc) }} </option> </select> </div></template><script setup lang="ts">import { ref, watch } from "vue";import { getLocaleName } from "intlayer";import { useLocale } from "vue-intlayer";// 获取语言信息和 setLocale 函数const { locale, availableLocales, setLocale } = useLocale();// 使用 ref 跟踪选中的语言const selectedLocale = ref(locale.value);// 当选择变化时更新语言const changeLocale = () => setLocale(selectedLocale.value);// 保持 selectedLocale 与全局语言同步watch( () => locale.value, (newLocale) => { selectedLocale.value = newLocale; });</script></template><style scoped>.locale-switcher { margin: 1rem 0;}select { padding: 0.5rem; border-radius: 0.25rem; border: 1px solid #ccc;}</style>
然后,在你的页面或布局中使用此组件:
复制代码到剪贴板
<script setup lang="ts">import { useIntlayer } from "vue-intlayer";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";const content = useIntlayer("app"); // 创建相关的 intlayer 声明文件</script><template> <div> <header> <LocaleSwitcher /> </header> <main> <NuxtPage /> </main> </div></template>
(可选)步骤 7:为你的应用添加本地化路由
Nuxt 在使用 nuxt-intlayer 模块时会自动处理本地化路由。它会根据你的页面目录结构自动为每种语言创建路由。
示例:
复制代码到剪贴板
pages/├── index.vue → /, /fr, /es├── about.vue → /about, /fr/about, /es/about└── contact/ └── index.vue → /contact, /fr/contact, /es/contact
要创建本地化页面,只需在 pages/ 目录中创建你的 Vue 文件:
复制代码到剪贴板
<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("about");</script><template> <div> <h1>{{ content.title }}</h1> <p>{{ content.description }}</p> </div></template>
nuxt-intlayer 模块将自动:
- 检测用户的首选语言环境
- 通过 URL 处理语言环境切换
- 设置合适的 <html lang=""> 属性
- 管理语言环境的 Cookie
- 将用户重定向到相应的本地化 URL
(可选)步骤 8:创建本地化链接组件
为了确保您的应用导航遵循当前语言环境,您可以创建一个自定义的 LocalizedLink 组件。该组件会自动为内部链接添加当前语言的前缀。
复制代码到剪贴板
<template> <NuxtLink :to="localizedHref" v-bind="$attrs"> <slot /> </NuxtLink></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({ to: { type: String, required: true, },});const { locale } = useLocale();// 检查链接是否为外部链接const isExternalLink = computed(() => /^https?:\/\//.test(props.to || ""));// 为内部链接创建本地化的 hrefconst localizedHref = computed(() => isExternalLink.value ? props.to : getLocalizedUrl(props.to, locale.value));</script>
然后在整个应用中使用此组件:
复制代码到剪贴板
<template> <div> <LocalizedLink to="/about"> {{ content.aboutLink }} </LocalizedLink> <LocalizedLink to="/contact"> {{ content.contactLink }} </LocalizedLink> </div></template><script setup lang="ts">import { useIntlayer } from "vue-intlayer";import LocalizedLink from "~/components/LocalizedLink.vue";const content = useIntlayer("home");</script>
(可选)第9步:处理元数据和SEO
Nuxt 提供了出色的SEO功能。您可以使用 Intlayer 来处理本地化的元数据:
复制代码到剪贴板
<script setup lang="ts">import { useSeoMeta } from "nuxt/app";import { getIntlayer } from "intlayer";import { useLocale } from "vue-intlayer";const { locale } = useLocale();const content = getIntlayer("about-meta", locale.value);useSeoMeta({ title: content.title, description: content.description,});</script><template> <div> <h1>{{ content.pageTitle }}</h1> <p>{{ content.pageContent }}</p> </div></template>
创建对应的内容声明:
复制代码到剪贴板
import { t, type Dictionary } from "intlayer";import type { useSeoMeta } from "nuxt/app";const aboutMetaContent = { key: "about-meta", content: { title: t({ zh: "关于我们 - 我的公司", en: "About Us - My Company", fr: "À Propos - Ma Société", es: "Acerca de Nosotros - Mi Empresa", }), description: t({ zh: "了解更多关于我们公司和我们的使命", en: "Learn more about our company and our mission", fr: "En savoir plus sur notre société et notre mission", es: "Conozca más sobre nuestra empresa y nuestra misión", }), },} satisfies Dictionary<Parameters<typeof useSeoMeta>[0]>;export default aboutMetaContent;
配置 TypeScript
Intlayer 使用模块增强来利用 TypeScript 的优势,使您的代码库更加强大。
确保您的 TypeScript 配置包含自动生成的类型。
复制代码到剪贴板
{ // ... 您现有的 TypeScript 配置 "include": [ // ... 您现有的 TypeScript 配置 ".intlayer/**/*.ts", // 包含自动生成的类型 ],}
Git 配置
建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
为此,您可以将以下指令添加到您的 .gitignore 文件中:
复制代码到剪贴板
# 忽略 Intlayer 生成的文件.intlayer
VS Code 扩展
为了提升您使用 Intlayer 的开发体验,您可以安装官方的 Intlayer VS Code 扩展。
该扩展提供:
- 翻译键的自动补全。
- 实时错误检测,用于缺失的翻译。
- 内联预览,展示翻译内容。
- 快速操作,轻松创建和更新翻译。
有关如何使用该扩展的更多详细信息,请参阅Intlayer VS Code 扩展文档。
深入了解
要进一步使用,您可以实现可视化编辑器或使用内容管理系统(CMS)将内容外部化。
文档历史
- 5.5.10 - 2025-06-29: 初始化历史