使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商
版本历史
- "更新 Solid useIntlayer API 用法以直接访问属性"v8.9.02026/5/4
- "初始历史"v8.4.102026/3/23
此页面的内容已使用 AI 翻译。
查看英文原文的最新版本如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接复制文档 Markdown 到剪贴板
使用 Intlayer 翻译您的 Vite 和 Vanilla JS 网站 | 国际化 (i18n)
目录
什么是 Intlayer？
Intlayer 是一个创新且开源的国际化 (i18n) 库，旨在简化现代 Web 应用程序中的多语言支持。
使用 Intlayer，您可以：
- 轻松管理翻译：在组件级别使用声明式字典。
- 动态本地化元数据、路由和内容。
- 确保 TypeScript 支持：通过自动生成的类型，改进自动补全和错误检测。
- 受益于高级功能：如动态语言检测和切换。
在 Vite 和 Vanilla JS 应用程序中设置 Intlayer 的分步指南
第 1 步：安装依赖项
使用 npm 安装必要的软件包：
复制代码到剪贴板
npm install intlayer vanilla-intlayernpm install vite-intlayer --save-devnpx intlayer initvanilla-intlayer 将 Intlayer 与纯 JavaScript / TypeScript 应用程序集成的库。它提供了一个发布/订阅单例 (
IntlayerClient) 和基于回调的辅助工具 (useIntlayer,useLocale等)，因此您的应用程序的任何部分都可以对语言更改做出反应，而不依赖于 UI 框架。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 { intlayer } from "vite-intlayer";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [intlayer()],
});intlayer() Vite 插件用于将 Intlayer 与 Vite 集成。它确保内容声明文件的构建并在开发模式下监控它们。它在 Vite 应用程序中定义 Intlayer 环境变量。此外，它还提供别名以优化性能。第 4 步：在入口点引导 Intlayer
在渲染任何内容之前调用 installIntlayer()，以便全局语言单例准备就绪。
复制代码到剪贴板
import { installIntlayer } from "vanilla-intlayer";// 必须在渲染任何 i18n 内容之前调用。installIntlayer();// 导入并运行您的应用模块。import "./app.js";如果您还使用 md() 内容声明 (Markdown)，请同时安装 Markdown 渲染器：
复制代码到剪贴板
import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";installIntlayer();installIntlayerMarkdown();import "./app.js";第 5 步：声明您的内容
创建并管理您的内容声明以存储翻译：
复制代码到剪贴板
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}）。有关更多详细信息，请参阅 内容声明文档。
第 6 步：在 JavaScript 中使用 Intlayer
vanilla-intlayer 镜像了 react-intlayer 的表面 API：useIntlayer(key, locale?) 直接返回翻译后的内容。在结果上链式调用 .onChange() 以订阅语言更改 - 这相当于 React 的显式重新渲染。
复制代码到剪贴板
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 函数。
复制代码到剪贴板
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：
复制代码到剪贴板
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。
复制代码到剪贴板
import { defineConfig } from "vite";
import { intlayer, intlayerProxy } from "vite-intlayer";
export default defineConfig({
plugins: [
intlayerProxy(), // 应该放在第一位
intlayer(),
],
});(可选) 第 10 步：语言更改时更改 URL
要在语言更改时更新浏览器 URL，请在安装 Intlayer 后调用 useRewriteURL()：
复制代码到剪贴板
import { installIntlayer, useRewriteURL } from "vanilla-intlayer";installIntlayer();// 立即重写 URL，并在随后的每次语言更改时重写。// 返回一个用于清理的取消订阅函数。const stopRewriteURL = useRewriteURL();(可选) 第 11 步：切换 HTML 语言和方向属性
更新 <html> 标签的 lang 和 dir 属性以匹配当前语言，以提高可访问性和 SEO。
复制代码到剪贴板
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：
复制代码到剪贴板
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 部分：
复制代码到剪贴板
import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { // ... 配置的其余部分 compiler: { /** * 指示是否应启用编译器。 */ enabled: true, /** * 定义输出文件路径 */ output: ({ fileName, extension }) => `./${fileName}${extension}`, /** * 指示组件在被转换后是否应保存。 * 这样，编译器只需运行一次来转换应用程序，然后就可以移除它。 */ saveComponents: false, /** * 字典键前缀 */ dictionaryKeyPrefix: "", },};export default config;运行提取器来转换您的组件并提取内容
复制代码到剪贴板
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
复制代码到剪贴板
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 之前执行脚本
复制代码到剪贴板
{ "scripts": { "dev": "vite", "prebuild": "node generate-seo.mjs", "build": "vite build", "preview": "vite preview" }}若使用 pnpm 或 yarn，请相应调整命令；也可在 CI 或其他步骤中调用该脚本。
配置 TypeScript
确保您的 TypeScript 配置包含自动生成的类型。
复制代码到剪贴板
{ "compilerOptions": { // ... }, "include": ["src", ".intlayer/**/*.ts"],}Git 配置
建议忽略由 Intlayer 生成的文件。这可以避免将它们提交到您的 Git 仓库。
为此，您可以在 .gitignore 文件中添加以下指令：
复制代码到剪贴板
# 忽略由 Intlayer 生成的文件.intlayerVS Code 扩展
为了改善您使用 Intlayer 的开发体验，您可以安装官方的 Intlayer VS Code 扩展。
此扩展提供：
- 翻译键的自动补全。
- 缺失翻译的实时错误检测。
- 翻译内容的内联预览。
- 轻松创建和更新翻译的快速操作。
有关如何使用该扩展的更多详细信息，请参阅 Intlayer VS Code 扩展文档。