使用 Intlayer 和 Vite 及 Solid 开始国际化（i18n）

该包正在开发中。更多信息请参见issue。通过点赞该 issue 来表达您对 Solid 版 Intlayer 的兴趣。

什么是 Intlayer？

Intlayer 是一个创新的开源国际化（i18n）库，旨在简化现代 Web 应用中的多语言支持。

使用 Intlayer，您可以：

• 通过组件级声明式字典轻松管理翻译。
• 动态本地化元数据、路由和内容。
• 通过自动生成类型确保 TypeScript 支持，提升自动补全和错误检测能力。
• 受益于高级功能，如动态语言环境检测和切换。

在 Vite 和 Solid 应用中设置 Intlayer 的分步指南

第一步：安装依赖

使用 npm 安装所需的包：

npm install intlayer solid-intlayernpm install vite-intlayer --save-dev

• intlayer

• intlayer 提供国际化工具的核心包，用于配置管理、翻译、内容声明、转译以及命令行工具。

• solid-intlayer 将 Intlayer 集成到 Solid 应用中的包。它提供了 Solid 国际化的上下文提供者和钩子。

• 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 日志等。有关可用参数的完整列表，请参阅配置文档。

第3步：在你的 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() 是用于将 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 的语言和方向属性

[to complete]

（可选）步骤 10：创建本地化链接组件

[to complete]

Git 配置

建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。

为此，您可以将以下指令添加到您的 .gitignore 文件中：

# 忽略 Intlayer 生成的文件.intlayer

VS Code 扩展

为了提升您使用 Intlayer 的开发体验，您可以安装官方的 Intlayer VS Code 扩展。

从 VS Code 市场安装

该扩展提供：

• 翻译键的自动补全。
• 缺失翻译的实时错误检测。
• 已翻译内容的内联预览。
• 快速操作，轻松创建和更新翻译。

有关如何使用该扩展的更多详细信息，请参阅Intlayer VS Code 扩展文档。

深入了解

要进一步使用，您可以实现可视化编辑器或使用内容管理系统（CMS）将内容外部化。

文档历史

• 5.5.10 - 2025-06-29：初始化历史