Creation:2026-03-23Last update:2026-05-31

    使用 Intlayer 翻译您的 Vite 和 Vanilla JS 网站 | 国际化 (i18n)

    ide.intlayer.org

    目录

    为什么选择 Inlayer 而不是替代品？

    与“i18next”或“i18n.js”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：

    Vite 全面覆盖

    Intlayer 经过优化，可与 Vite 完美配合，提供与框架无关的内容管理、TypeScript 支持以及扩展国际化 (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 和 Vanilla JS 应用程序中设置 Intlayer 的分步指南

    第 1 步：安装依赖项

    使用 npm 安装必要的软件包：

    bash
    npm install intlayer vanilla-intlayernpm install vite-intlayer --save-devnpx intlayer init

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

    • vanilla-intlayer 将 Intlayer 与纯 JavaScript / TypeScript 应用程序集成的库。它提供了一个发布/订阅单例 (IntlayerClient) 和基于回调的辅助工具 (useIntlayer, useLocale 等)，因此您的应用程序的任何部分都可以对语言更改做出反应，而不依赖于 UI 框架。

    • vite-intlayer 包含用于将 Intlayer 与 Vite 打包器 集成的 Vite 插件，以及用于检测用户首选语言、管理 Cookie 和处理 URL 重定向的中间件。

    第 2 步：配置项目

    创建一个配置文件来配置应用程序的语言：

    intlayer.config.ts
    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 插件。

    vite.config.ts
    import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [intlayer()],
});
    intlayer() Vite 插件用于将 Intlayer 与 Vite 集成。它确保内容声明文件的构建并在开发模式下监控它们。它在 Vite 应用程序中定义 Intlayer 环境变量。此外，它还提供别名以优化性能。

    第 4 步：在入口点引导 Intlayer

    在渲染任何内容之前调用 installIntlayer()，以便全局语言单例准备就绪。

    src/main.ts
    import { installIntlayer } from "vanilla-intlayer";// 必须在渲染任何 i18n 内容之前调用。installIntlayer();// 导入并运行您的应用模块。import "./app.js";

    如果您还使用 md() 内容声明 (Markdown)，请同时安装 Markdown 渲染器：

    src/main.ts
    import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";installIntlayer();installIntlayerMarkdown();import "./app.js";

    第 5 步：声明您的内容

    创建并管理您的内容声明以存储翻译：

    src/app.content.ts
    import { insert, t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Vanilla",

    viteLogoLabel: t({
      en: "Vite Logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),

    count: insert(
      t({
        en: "count is {{count}}",
        fr: "le compte est {{count}}",
        es: "el recuento es {{count}}",
      })
    ),

    readTheDocs: t({
      en: "Click on the Vite logo to learn more",
      fr: "Cliquez sur le logo Vite pour en savoir plus",
      es: "点击 Vite 标志了解更多信息",
    }),
  },
} satisfies Dictionary;

export default appContent;

    只要您的内容声明包含在 contentDir 目录（默认为 ./src）中，就可以在应用程序的任何位置定义它们。并且匹配内容声明文件扩展名（默认为 .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}）。

    有关更多详细信息，请参阅 内容声明文档。

    第 6 步：在 JavaScript 中使用 Intlayer

    vanilla-intlayer 镜像了 react-intlayer 的表面 API：useIntlayer(key, locale?) 直接返回翻译后的内容。在结果上链式调用 .onChange() 以订阅语言更改 - 这相当于 React 的显式重新渲染。

    src/main.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";installIntlayer();// 获取当前语言的初始内容。// 链式调用 .onChange()，以便在语言发生变化时得到通知。const content = useIntlayer("app").onChange((newContent) => {  // 仅重新渲染或补丁受影响的 DOM 节点  document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(    newContent.title  );  document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =    String(newContent.readTheDocs);});// 初始渲染document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(  content.title);document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =  String(content.readTheDocs);

    通过将叶值包装在 String() 中将其作为字符串访问，这将调用节点的 toString() 方法并返回翻译后的文本。

    当您需要原生 HTML 属性（例如 alt, aria-label）的值时，请直接使用 .value：

    typescript
    img.alt = content.viteLogoLabel.value;

    (可选) 第 7 步：更改内容的语言

    要更改内容的语言，请使用 useLocale 公开的 setLocale 函数。

    src/locale-switcher.ts
    import { getLocaleName } from "intlayer";import { useLocale } from "vanilla-intlayer";export function setupLocaleSwitcher(container: HTMLElement): () => void {  const { locale, availableLocales, setLocale, subscribe } = useLocale();  const select = document.createElement("select");  select.setAttribute("aria-label", "Language");  const render = (currentLocale: string) => {    select.innerHTML = availableLocales      .map(        (loc) =>          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>            ${getLocaleName(loc)}          </option>`      )      .join("");  };  render(locale);  container.appendChild(select);  select.addEventListener("change", () => setLocale(select.value as any));  // 当语言从其他地方更改时，保持下拉菜单同步  return subscribe((newLocale) => render(newLocale));}

    (可选) 第 8 步：渲染 Markdown 和 HTML 内容

    Intlayer 支持 md() 和 html() 内容声明。在纯 JS 中，编译后的输出通过 innerHTML 作为原始 HTML 插入。

    编译并注入 HTML：

    src/main.ts
    import {  compileMarkdown,  installIntlayerMarkdown,  useIntlayer,} from "vanilla-intlayer";installIntlayerMarkdown();const content = useIntlayer("app").onChange((newContent) => {  const el = document.querySelector<HTMLDivElement>(".edit-note")!;  el.innerHTML = compileMarkdown(String(newContent.editNote));});document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =  compileMarkdown(String(content.editNote));
    TIP
    String(content.editNote) 在 IntlayerNode 上调用 toString()，该方法返回原始 Markdown 字符串。将其传递给 compileMarkdown 以获取 HTML 字符串，然后通过 innerHTML 设置它。
    WARNING

    仅对受信任的内容使用 innerHTML。如果 Markdown 来自用户输入，请先对其进行消毒（例如使用 DOMPurify）。您可以动态安装消毒渲染器：

    typescript
    import { installIntlayerMarkdownDynamic } from "vanilla-intlayer";await installIntlayerMarkdownDynamic(async () => {  const DOMPurify = await import("dompurify");  return (markdown) => DOMPurify.sanitize(compileMarkdown(markdown));});

    (可选) 第 9 步：在应用程序中添加本地化路由

    要为每种语言创建唯一的路由（对 SEO 很有用），您可以在 Vite 配置中使用 intlayerProxy 进行服务端语言检测。

    首先，在您的 Vite 配置中添加 intlayerProxy：

    请注意，要在生产环境中使用 intlayerProxy，您需要将 vite-intlayer 从 devDependencies 移动到 dependencies。
    vite.config.ts
    import { defineConfig } from "vite";
import { intlayer, intlayerProxy } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayerProxy(), // 应该放在第一位
    intlayer(),
  ],
});

    (可选) 第 10 步：语言更改时更改 URL

    要在语言更改时更新浏览器 URL，请在安装 Intlayer 后调用 useRewriteURL()：

    src/main.ts
    import { installIntlayer, useRewriteURL } from "vanilla-intlayer";installIntlayer();// 立即重写 URL，并在随后的每次语言更改时重写。// 返回一个用于清理的取消订阅函数。const stopRewriteURL = useRewriteURL();

    (可选) 第 11 步：切换 HTML 语言和方向属性

    更新 <html> 标签的 lang 和 dir 属性以匹配当前语言，以提高可访问性和 SEO。

    src/main.ts
    import { getHTMLTextDir } from "intlayer";import { installIntlayer, useLocale } from "vanilla-intlayer";installIntlayer();useLocale({  onLocaleChange: (locale) => {    document.documentElement.lang = locale;    document.documentElement.dir = getHTMLTextDir(locale);  },});

    (可选) 第 12 步：按语言延迟加载字典

    对于大型应用程序，您可能希望将每种语言的字典拆分到其自己的块中。结合 Vite 的动态 import() 使用 useDictionaryDynamic：

    src/app.ts
    import { installIntlayer, useDictionaryDynamic } from "vanilla-intlayer";installIntlayer();const unsubscribe = useDictionaryDynamic(  {    en: () => import("../.intlayer/dictionaries/en/app.mjs"),    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),    es: () => import("../.intlayer/dictionaries/es/app.mjs"),  },  "app").onChange((content) => {  document.querySelector("h1")!.textContent = String(content.title);});
    每种语言的包仅在该语言激活时才获取，并且结果会被缓存 - 随后切换到同一语言是即时的。

    (可选) 第 13 步：提取组件内容

    如果您已经拥有代码库，转换数千个文件可能会非常耗时。

    为了简化此过程，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
    npx intlayer extract

    （可选）站点地图与 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

    generate-seo.mjs
    import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

    需已安装 intlayer 以便脚本导入。生产环境请设置环境变量 SITE_URL（例如在 CI 中）。

    建议在 Node 中使用 generate-seo.mjs（ESM）。若使用 generate-seo.js，请在 package.json 中设置 "type": "module" 或以其他方式启用 ESM。

    2. 在运行 Vite 之前执行脚本

    package.json
    {  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

    若使用 pnpm 或 yarn，请相应调整命令；也可在 CI 或其他步骤中调用该脚本。

    配置 TypeScript

    确保您的 TypeScript 配置包含自动生成的类型。

    tsconfig.json
    {  "compilerOptions": {    // ...  },  "include": ["src", ".intlayer/**/*.ts"],}

    Git 配置

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

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

    bash
    # 忽略由 Intlayer 生成的文件.intlayer

    VS Code 扩展

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

    从 VS Code Marketplace 安装

    此扩展提供：

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

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

    深入了解

    要深入了解，您可以实现 可视化编辑器 或使用 CMS 外置您的内容。

    Vite和Preact
    Vite和Lit