使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商
版本历史
- "更新 Solid useIntlayer API 用法以直接访问属性"v8.9.02026/5/4
- "添加 init 命令"v7.5.92025/12/30
- "更新文档"v5.5.112025/11/19
- "初始化历史记录"v5.5.102025/6/29
此页面的内容已使用 AI 翻译。
查看英文原文的最新版本如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接复制文档 Markdown 到剪贴板
使用 Intlayer 翻译您的 Vite 和 Svelte 网站 | 国际化 (i18n)
目录
为什么选择 Inlayer 而不是替代品？
与“svelte-i18n”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
完全 Svelte 覆盖
Intlayer 经过优化，可与 Svelte 完美配合，提供组件级内容范围、反应式翻译以及扩展国际化 (i18n) 所需的所有功能。
捆绑尺寸
不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于将捆绑包和页面大小减少多达 50%。
可维护性
确定应用程序内容的范围有利于大型应用程序的维护。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有完全类型化 (fully typed)，以确保您的内容的准确性。
人工智能代理
共置内容减少大型语言模型 (LLM) 所需的上下文。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 CLI、LSP、MCP 和 agent技能，使 AI 代理的开发者体验 (DX) 更加流畅。
自动化
使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个编译器来自动提取内容，以及一个网络平台来帮助在后台翻译。
表现
将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
无需开发即可扩展
Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个自托管的可视化编辑器和一个完整的 CMS 来帮助您管理多语言内容实时，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
在 Vite 和 Svelte 应用中设置 Intlayer 的分步指南
请参阅 GitHub 上的应用模板。
第一步：安装依赖
使用 npm 安装必要的包：
复制代码到剪贴板
intlayer
svelte-intlayer 将 Intlayer 与 Svelte 应用程序集成的包。它提供了用于 Svelte 国际化的上下文提供者和钩子。
vite-intlayer 包含用于将 Intlayer 集成到 Vite 打包工具 的 Vite 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
第 2 步：配置您的项目
创建一个配置文件来配置您的应用程序语言：
复制代码到剪贴板
通过此配置文件，您可以设置本地化 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅配置文档。
第三步：在您的 Vite 配置中集成 Intlayer
将 intlayer 插件添加到您的配置中。
复制代码到剪贴板
intlayer() Vite 插件用于将 Intlayer 集成到 Vite 中。它确保内容声明文件的构建，并在开发模式下监控这些文件。它在 Vite 应用中定义了 Intlayer 的环境变量。此外，它还提供别名以优化性能。第四步：声明您的内容
创建并管理您的内容声明以存储翻译：
复制代码到剪贴板
import { t, type Dictionary } from "intlayer";
const appContent = {
key: "app",
content: {
title: t({
en: "Hello World",
fr: "Bonjour le monde",
es: "Hola mundo",
}),
},
} satisfies Dictionary;
export default appContent;您的内容声明可以定义在应用程序中的任何位置，只要它们被包含在contentDir目录中（默认是./src），并且文件扩展名符合内容声明文件扩展名（默认是.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}）。
更多详情，请参阅内容声明文档。
第5步：在代码中使用 Intlayer
复制代码到剪贴板
如果您的应用程序已经存在，您可以结合使用 Intlayer 编译器 和 提取命令 在一秒钟内转换成干个组件。
更改内容语言
src/App.svelte复制代码复制代码到剪贴板
渲染Markdown
Intlayer支持在您的Svelte应用中直接渲染Markdown内容。默认情况下，Markdown被视为纯文本。要将Markdown转换为丰富的HTML，您可以集成
@humanspeak/svelte-markdown或其他markdown解析器。要了解如何使用
intlayer包声明markdown内容，请参阅markdown文档。src/App.svelte复制代码复制代码到剪贴板
你也可以通过
content.markdownContent.metadata.xxx属性访问你的 markdown front-matter 数据。设置 intlayer 编辑器 / CMS
要设置 intlayer 编辑器，你必须遵循 intlayer 编辑器文档。
要设置 intlayer CMS，你必须遵循 intlayer CMS 文档。
为你的应用程序添加本地化路由
为了在你的 Svelte 应用程序中处理本地化路由，你可以使用
svelte-spa-router，并结合 Intlayer 的localeFlatMap来为每个语言环境生成路由。首先，安装
svelte-spa-router：bash复制代码复制代码到剪贴板
然后，创建一个
Router.svelte文件来定义你的路由：src/Router.svelte复制代码复制代码到剪贴板
更新你的
main.ts，将挂载的组件从App改为Router：src/main.ts复制代码复制代码到剪贴板
最后，更新你的
App.svelte以接收locale属性并使用useIntlayer：src/App.svelte复制代码复制代码到剪贴板
配置服务器端路由（可选）
同时，您还可以使用
intlayerProxy为您的应用程序添加服务器端路由。该插件会根据 URL 自动检测当前的语言环境，并设置相应的语言环境 cookie。如果未指定语言环境，插件将根据用户浏览器的语言偏好确定最合适的语言环境。如果未检测到任何语言环境，它将重定向到默认语言环境。注意，要在生产环境中使用
intlayerProxy，您需要将vite-intlayer包从devDependencies切换到dependencies。vite.config.ts复制代码复制代码到剪贴板
import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; import { intlayer, intlayerProxy } from "vite-intlayer"; typescript {3,7} fileName="vite.config.ts" codeFormat="typescript" import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; import { intlayer, intlayerProxy } from "vite-intlayer"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [intlayerProxy(), // should be placed first svelte(), intlayer()], });当语言环境改变时更改 URL
为了允许用户切换语言并相应地更新 URL，您可以创建一个
LocaleSwitcher组件。该组件将使用intlayer中的getLocalizedUrl和svelte-spa-router中的push。src/lib/LocaleSwitcher.svelte复制代码复制代码到剪贴板
当语言环境变化时更改 URL
为了允许用户切换语言并相应地更新 URL，您可以创建一个
LocaleSwitcher组件。该组件将使用来自intlayer的getLocalizedUrl和来自svelte-spa-router的push。src/lib/LocaleSwitcher.svelte复制代码复制代码到剪贴板
提取组件内容
可选如果您有现有的代码库，转换数千个文件可能会非常耗时。
为了简化此过程，Intlayer 提出了 编译器 / 提取器 来转换您的组件并提取内容。
要进行设置，您可以在
intlayer.config.ts文件中添加compiler部分：intlayer.config.ts复制代码复制代码到剪贴板
import { type IntlayerConfig } from "intlayer"; const config: IntlayerConfig = { // ... 您的其他配置 compiler: { /** * 指示是否应启用编译器。 */ enabled: true, /** * 定义输出文件路径 */ output: ({ fileName, extension }) => `./${fileName}${extension}`, /** * 指示在转换后是否应保存组件。这样，编译器只需运行一次即可转换应用程序，然后即可将其删除。 */ saveComponents: false, /** * 字典键前缀 */ dictionaryKeyPrefix: "", }, }; export default config;运行提取器以转换组件并提取内容
bash复制代码复制代码到剪贴板
Git 配置
建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
为此，您可以在 .gitignore 文件中添加以下指令：
复制代码到剪贴板
VS Code 扩展
为了提升您使用 Intlayer 的开发体验，您可以安装官方的 Intlayer VS Code 扩展。
该扩展提供：
- 翻译键的 自动补全。
- 缺失翻译的 实时错误检测。
- 翻译内容的 内联预览。
- 轻松创建和更新翻译的 快速操作。
有关如何使用该扩展的更多详细信息，请参阅 Intlayer VS Code 扩展文档。
（可选）站点地图与 robots.txt（构建时生成）
Intlayer 提供 generateSitemap 与 getMultilingualUrls，可将面向爬虫的多语言 sitemap.xml 和 robots.txt 格式化并自动写入 public/。实践中在 Vite 之前运行小型 Node 脚本（例如 npm 的 predev / prebuild）即可在构建或开发时生成这些文件。
站点地图
Intlayer 的站点地图生成会尊重你的语言配置，并包含爬虫所需的元数据。
生成的站点地图支持xhtml:link（hreflang）。与只列出扁平 URL 不同，Intlayer 会在各语言版本之间建立双向关联（例如/about、/fr/about或/about?lang=fr，取决于路由模式）。
Robots.txt
使用 getMultilingualUrls，使 Disallow 覆盖敏感路径的每一种本地化写法。
1. 在项目根目录添加 generate-seo.mjs
复制代码到剪贴板
需已安装 intlayer 以便脚本导入。生产环境请设置环境变量 SITE_URL（例如在 CI 中）。
建议在 Node 中使用generate-seo.mjs（ESM）。若使用generate-seo.js，请在package.json中设置"type": "module"或以其他方式启用 ESM。
2. 在运行 Vite 之前执行脚本
复制代码到剪贴板
若使用 pnpm 或 yarn，请相应调整命令；也可在 CI 或其他步骤中调用该脚本。