使用您最喜欢的AI助手总结文档,并引用此页面和AI提供商
通过将 Intlayer MCP 服务器集成到您的 AI 助手,您可以直接从 ChatGPT、DeepSeek、Cursor、VSCode 等获取所有文档。
查看 MCP 服务器文档此页面的内容已使用 AI 翻译。
查看英文原文的最新版本如果您有改善此文档的想法,请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接复制文档 Markdown 到剪贴板
使用 Intlayer、Vite 和 Svelte 开始国际化(i18n)
该包正在开发中。有关更多信息,请参见问题。通过点赞该问题,表达您对 Svelte 版 Intlayer 的兴趣。
什么是 Intlayer?
Intlayer 是一个创新的开源国际化(i18n)库,旨在简化现代 Web 应用中的多语言支持。
使用 Intlayer,您可以:
- 通过组件级声明式字典轻松管理翻译。
- 动态本地化元数据、路由和内容。
- 通过自动生成类型确保 TypeScript 支持,提升自动补全和错误检测。
- 受益于高级功能,如动态语言环境检测和切换。
在 Vite 和 Svelte 应用中设置 Intlayer 的分步指南
第一步:安装依赖
使用 npm 安装必要的包:
复制代码到剪贴板
npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev
intlayer
svelte-intlayer
将 Intlayer 集成到 Svelte 应用中的包。它提供了用于 Svelte 国际化的上下文提供者和钩子。vite-intlayer
包含用于将 Intlayer 集成到Vite 打包工具的 Vite 插件,以及用于检测用户首选语言、管理 Cookie 和处理 URL 重定向的中间件。
第2步:配置您的项目
创建一个配置文件来配置您应用程序的语言:
复制代码到剪贴板
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // 您的其他语言 ], defaultLocale: Locales.ENGLISH, },};export default config;
通过此配置文件,您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表,请参阅配置文档。
第三步:在您的 Vite 配置中集成 Intlayer
将 intlayer 插件添加到您的配置中。
复制代码到剪贴板
import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [react(), intlayerPlugin()],});
intlayerPlugin() Vite 插件用于将 Intlayer 集成到 Vite 中。它确保内容声明文件的构建,并在开发模式下监视这些文件。它在 Vite 应用程序中定义了 Intlayer 环境变量。此外,它还提供别名以优化性能。
第4步:声明您的内容
创建并管理您的内容声明以存储翻译:
复制代码到剪贴板
import { t, type Dictionary } from "intlayer";const appContent = { key: "app", content: {},} satisfies Dictionary;export default appContent;
您的内容声明可以定义在应用程序中的任何位置,只要它们被包含在 contentDir 目录中(默认是 ./src),并且文件扩展名符合内容声明文件扩展名(默认是 .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx})。
有关更多详细信息,请参阅内容声明文档。
第5步:在代码中使用 Intlayer
[待完成]
(可选)第6步:更改内容语言
[待完成]
(可选)第7步:为您的应用添加本地化路由
[待完成]
(可选)第8步:在语言环境更改时更改 URL
[待完成]
(可选)第9步:切换 HTML 的语言和方向属性
[待完成]
(可选)第10步:创建本地化链接组件
[待完成]
Git 配置
建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
要做到这一点,您可以将以下指令添加到您的 .gitignore 文件中:
复制代码到剪贴板
# 忽略 Intlayer 生成的文件.intlayer
VS Code 扩展
为了提升您使用 Intlayer 的开发体验,您可以安装官方的 Intlayer VS Code 扩展。
该扩展提供:
- 翻译键的自动补全。
- 缺失翻译的实时错误检测。
- 翻译内容的内联预览。
- 轻松创建和更新翻译的快速操作。
有关如何使用该扩展的更多详细信息,请参阅 Intlayer VS Code 扩展文档。
深入探索
要进一步使用,您可以实现可视化编辑器或使用内容管理系统(CMS)将内容外部化。
文档历史
- 5.5.10 - 2025-06-29:初始化历史