\n\n
\n\n\n\n{@const Title = $content.title}
\n\n\n\n\n```\n\n> 如果您的应用程序已经存在，您可以结合使用 [Intlayer 编译器](/zh/doc/compiler) 和 [提取命令](/zh/doc/concept/cli/extract) 在一秒钟内转换成干个组件。\n\n### （可选）步骤6：更改内容语言\n\n```svelte fileName=\"src/App.svelte\"\n\n\n\n \n```\n\n#### 配置服务器端路由（可选）\n\n同时，您还可以使用 `intlayerProxy` 为您的应用程序添加服务器端路由。该插件会根据 URL 自动检测当前的语言环境，并设置相应的语言环境 cookie。如果未指定语言环境，插件将根据用户浏览器的语言偏好确定最合适的语言环境。如果未检测到任何语言环境，它将重定向到默认语言环境。\n\n> 注意，要在生产环境中使用 `intlayerProxy`，您需要将 `vite-intlayer` 包从 `devDependencies` 切换到 `dependencies`。\n\n```typescript {3,7} fileName=\"vite.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { defineConfig } from \"vite\";\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\n\ntypescript {3,7} fileName=\"vite.config.ts\" codeFormat=\"typescript\"\nimport { defineConfig } from \"vite\";\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [intlayerProxy(), // should be placed first\n svelte(), intlayer()],\n});\n```\n\n### （可选）步骤 8：当语言环境改变时更改 URL\n\n为了允许用户切换语言并相应地更新 URL，您可以创建一个 `LocaleSwitcher` 组件。该组件将使用 `intlayer` 中的 `getLocalizedUrl` 和 `svelte-spa-router` 中的 `push`。\n\n```svelte fileName=\"src/lib/LocaleSwitcher.svelte\"\n\n\n\n \n\n运行提取器以转换组件并提取内容\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\n更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // 添加编译器插件\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # 或 npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # 或 pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # 或 yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n \n\n### （可选）站点地图与 robots.txt（构建时生成）\n\nIntlayer 提供 `generateSitemap` 与 `getMultilingualUrls`，可将面向爬虫的多语言 `sitemap.xml` 和 `robots.txt` 格式化并自动写入 `public/`。实践中在 Vite **之前**运行小型 Node 脚本（例如 npm 的 `predev` / `prebuild`）即可在构建或开发时生成这些文件。\n\n#### 站点地图\n\nIntlayer 的站点地图生成会尊重你的语言配置，并包含爬虫所需的元数据。\n\n> 生成的站点地图支持 `xhtml:link`（hreflang）。与只列出扁平 URL 不同，Intlayer 会在各语言版本之间建立双向关联（例如 `/about`、`/fr/about` 或 `/about?lang=fr`，取决于路由模式）。\n\n#### Robots.txt\n\n使用 `getMultilingualUrls`，使 `Disallow` 覆盖敏感路径的每一种本地化写法。\n\n#### 1. 在项目根目录添加 `generate-seo.mjs`\n\n```javascript fileName=\"generate-seo.mjs\"\nimport fs from \"fs\";\nimport path from \"path\";\nimport { fileURLToPath } from \"url\";\nimport { generateSitemap, getMultilingualUrls } from \"intlayer\";\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\n\nconst SITE_URL = (process.env.SITE_URL || \"http://localhost:5173\").replace(\n /\\/$/,\n \"\"\n);\n\nconst pathList = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });\nfs.writeFileSync(path.join(__dirname, \"public\", \"sitemap.xml\"), sitemapXml);\n\nconst getAllMultilingualUrls = (urls) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)));\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nconst robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${SITE_URL}/sitemap.xml`,\n].join(\"\\n\");\n\nfs.writeFileSync(path.join(__dirname, \"public\", \"robots.txt\"), robotsTxt);\n\nconsole.log(\"SEO files generated successfully.\");\n```\n\n需已安装 `intlayer` 以便脚本导入。生产环境请设置环境变量 `SITE_URL`（例如在 CI 中）。\n\n> 建议在 Node 中使用 `generate-seo.mjs`（ESM）。若使用 `generate-seo.js`，请在 `package.json` 中设置 `\"type\": \"module\"` 或以其他方式启用 ESM。\n\n#### 2. 在运行 Vite 之前执行脚本\n\n```json fileName=\"package.json\"\n{\n \"scripts\": {\n \"dev\": \"vite\",\n \"prebuild\": \"node generate-seo.mjs\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n }\n}\n```\n\n若使用 pnpm 或 yarn，请相应调整命令；也可在 CI 或其他步骤中调用该脚本。\n\n### 深入了解\n\n要进一步提升，您可以实现[可视化编辑器](/zh/doc/concept/editor)或使用[CMS](/zh/doc/concept/cms)将内容外部化。\n","about":"了解如何使您的 Vite 和 Svelte 网站支持多语言。按照文档进行国际化 (i18n) 和翻译。","url":"https://intlayer.org/zh/doc/environment/vite-and-svelte","datePublished":"18-04-2025","dateModified":"06-05-2026","keywords":"国际化, 文档, Intlayer, Vite, Svelte, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"开发者，内容经理"}}
1. 在项目根目录添加
{$content.title}
\n\n{@const Title = $content.title}
\n\n\n\n\n```\n\n> 如果您的应用程序已经存在，您可以结合使用 [Intlayer 编译器](/zh/doc/compiler) 和 [提取命令](/zh/doc/concept/cli/extract) 在一秒钟内转换成干个组件。\n\n### （可选）步骤6：更改内容语言\n\n```svelte fileName=\"src/App.svelte\"\n\n\n\n \n
\n```\n\n### （可选）步骤7：渲染Markdown\n\nIntlayer支持在您的Svelte应用中直接渲染Markdown内容。默认情况下，Markdown被视为纯文本。要将Markdown转换为丰富的HTML，您可以集成`@humanspeak/svelte-markdown`或其他markdown解析器。\n\n> 要了解如何使用`intlayer`包声明markdown内容，请参阅[markdown文档](https://github.com/aymericzip/intlayer/tree/main/docs/zh/dictionary/markdown.md)。\n\n```svelte fileName=\"src/App.svelte\"\n\n\n{$content.markdownContent}
\n```\n\n> 你也可以通过 `content.markdownContent.metadata.xxx` 属性访问你的 markdown front-matter 数据。\n\n### （可选）步骤 8：设置 intlayer 编辑器 / CMS\n\n要设置 intlayer 编辑器，你必须遵循 [intlayer 编辑器文档](/zh/doc/concept/editor)。\n\n要设置 intlayer CMS，你必须遵循 [intlayer CMS 文档](/zh/doc/concept/cms)。\n\n### （可选）步骤 7：为你的应用程序添加本地化路由\n\n为了在你的 Svelte 应用程序中处理本地化路由，你可以使用 `svelte-spa-router`，并结合 Intlayer 的 `localeFlatMap` 来为每个语言环境生成路由。\n\n首先，安装 `svelte-spa-router`：\n\n```bash packageManager=\"npm\"\nnpm install svelte-spa-router\nnpx intlayer init\n```\n\n```bash packageManager=\"pnpm\"\npnpm add svelte-spa-router\npnpm intlayer init\n```\n\n```bash packageManager=\"yarn\"\nyarn add svelte-spa-router\nyarn intlayer init\n```\n\n```bash packageManager=\"bun\"\nbun add svelte-spa-router\n```\n\n然后，创建一个 `Router.svelte` 文件来定义你的路由：\n\n```svelte fileName=\"src/Router.svelte\"\n\n\n\n
\n\n \n\n \n
\n```\n\n### Git 配置\n\n建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。\n\n为此，您可以在 `.gitignore` 文件中添加以下指令：\n\n```bash\n# 忽略 Intlayer 生成的文件\n.intlayer\n```\n\n### VS Code 扩展\n\n为了提升您使用 Intlayer 的开发体验，您可以安装官方的 **Intlayer VS Code 扩展**。\n\n[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\n该扩展提供：\n\n- 翻译键的 **自动补全**。\n- 缺失翻译的 **实时错误检测**。\n- 翻译内容的 **内联预览**。\n- 轻松创建和更新翻译的 **快速操作**。\n\n有关如何使用该扩展的更多详细信息，请参阅 [Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。\n\n---\n\n### (可选) 步骤 1 : 提取组件内容\n\n如果您有现有的代码库，转换数千个文件可能会非常耗时。\n\n为了简化此过程，Intlayer 提出了 [编译器](/zh/doc/compiler) / [提取器](/zh/doc/concept/cli/extract) 来转换您的组件并提取内容。\n\n要进行设置，您可以在 `intlayer.config.ts` 文件中添加 `compiler` 部分：\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... 您的其他配置\n compiler: {\n /**\n * 指示是否应启用编译器。\n */\n enabled: true,\n\n /**\n * 定义输出文件路径\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * 指示在转换后是否应保存组件。这样，编译器只需运行一次即可转换应用程序，然后即可将其删除。\n */\n saveComponents: false,\n\n /**\n * 字典键前缀\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\nCreation:2025-04-18Last update:2026-05-06
将此文档参考到您的 AI 助手ChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
使用您最喜欢的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 链接Copy
复制文档 Markdown 到剪贴板
使用 Intlayer 翻译您的 Vite 和 Svelte 网站 | 国际化 (i18n)
目录
什么是 Intlayer？
Intlayer 是一个创新的开源国际化 (i18n) 库，旨在简化现代 Web 应用的多语言支持。
使用 Intlayer，您可以：
- 通过组件级声明式字典轻松管理翻译。
- 动态本地化元数据、路由和内容。
- 确保 TypeScript 支持，通过自动生成类型提升自动补全和错误检测。
- 享受高级功能，如动态语言环境检测和切换。
在 Vite 和 Svelte 应用中设置 Intlayer 的分步指南
请参阅 GitHub 上的应用模板。
第一步：安装依赖
使用 npm 安装必要的包：
bash
复制代码
复制代码到剪贴板
npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer initintlayer
svelte-intlayer 将 Intlayer 与 Svelte 应用程序集成的包。它提供了用于 Svelte 国际化的上下文提供者和钩子。
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 日志等。有关可用参数的完整列表，请参阅配置文档。
第三步：在您的 Vite 配置中集成 Intlayer
将 intlayer 插件添加到您的配置中。
vite.config.ts
复制代码
复制代码到剪贴板
import { defineConfig } from "vite";import { svelte } from "@sveltejs/vite-plugin-svelte";import { intlayer } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [svelte(), intlayer()],});intlayer() Vite 插件用于将 Intlayer 集成到 Vite 中。它确保内容声明文件的构建，并在开发模式下监控这些文件。它在 Vite 应用中定义了 Intlayer 的环境变量。此外，它还提供别名以优化性能。第四步：声明您的内容
创建并管理您的内容声明以存储翻译：
src/app.content.tsx
复制代码
复制代码到剪贴板
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}）。
更多详情，请参阅内容声明文档。
第5步：在代码中使用 Intlayer
src/App.svelte
复制代码
复制代码到剪贴板
<script> import { useIntlayer } from "svelte-intlayer"; const content = useIntlayer("app");</script><div><!-- 以简单内容渲染内容 --><h1>{$content.title}</h1><!-- 使用编辑器渲染可编辑内容 --><h1>{@const Title = $content.title}<Title /></h1><!-- 以字符串形式渲染内容 --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>如果您的应用程序已经存在，您可以结合使用 Intlayer 编译器 和 提取命令 在一秒钟内转换成干个组件。
（可选）步骤6：更改内容语言
src/App.svelte
复制代码
复制代码到剪贴板
<script lang="ts">import { getLocaleName } from 'intlayer';import { useLocale } from "svelte-intlayer";// 获取语言信息和 setLocale 函数const { locale, availableLocales, setLocale } = useLocale();// 处理语言切换const changeLocale = (event: Event) => { const target = event.target as HTMLSelectElement; const newLocale = target.value; setLocale(newLocale);};</script><div> <select value={$locale} on:change={changeLocale}> {#each availableLocales ?? [] as loc} <option value={loc}> {getLocaleName(loc)} </option> {/each} </select></div>（可选）步骤7：渲染Markdown
Intlayer支持在您的Svelte应用中直接渲染Markdown内容。默认情况下，Markdown被视为纯文本。要将Markdown转换为丰富的HTML，您可以集成@humanspeak/svelte-markdown或其他markdown解析器。
要了解如何使用intlayer包声明markdown内容，请参阅markdown文档。
src/App.svelte
复制代码
复制代码到剪贴板
<script> import { setIntlayerMarkdown } from "svelte-intlayer"; setIntlayerMarkdown((markdown) => // 将 markdown 内容渲染为字符串 return markdown; );</script><h1>{$content.markdownContent}</h1>你也可以通过 content.markdownContent.metadata.xxx 属性访问你的 markdown front-matter 数据。
（可选）步骤 8：设置 intlayer 编辑器 / CMS
要设置 intlayer 编辑器，你必须遵循 intlayer 编辑器文档。
要设置 intlayer CMS，你必须遵循 intlayer CMS 文档。
（可选）步骤 7：为你的应用程序添加本地化路由
为了在你的 Svelte 应用程序中处理本地化路由，你可以使用 svelte-spa-router，并结合 Intlayer 的 localeFlatMap 来为每个语言环境生成路由。
首先，安装 svelte-spa-router：
bash
复制代码
复制代码到剪贴板
npm install svelte-spa-routernpx intlayer init然后，创建一个 Router.svelte 文件来定义你的路由：
src/Router.svelte
复制代码
复制代码到剪贴板
<script lang="ts">import { localeFlatMap } from "intlayer";import Router from "svelte-spa-router";import { wrap } from "svelte-spa-router/wrap";import App from "./App.svelte";const routes = Object.fromEntries( localeFlatMap(({locale, urlPrefix}) => [ [ urlPrefix || '/', wrap({ component: App as any, props: { locale, }, }), ], ]));</script><Router {routes} />更新你的 main.ts，将挂载的组件从 App 改为 Router：
src/main.ts
复制代码
复制代码到剪贴板
import { mount } from "svelte";import Router from "./Router.svelte";const app = mount(Router, { target: document.getElementById("app")!,});export default app;最后，更新你的 App.svelte 以接收 locale 属性并使用 useIntlayer：
src/App.svelte
复制代码
复制代码到剪贴板
<script lang="ts">import type { Locale } from 'intlayer';import { useIntlayer } from "svelte-intlayer";import Counter from './lib/Counter.svelte';import LocaleSwitcher from './lib/LocaleSwitcher.svelte';export let locale: Locale;$: content = useIntlayer('app', locale);</script><main> <div class="locale-switcher-container"> <LocaleSwitcher currentLocale={locale} /> </div> <!-- ... 你的应用其余部分 ... --></main>配置服务器端路由（可选）
同时，您还可以使用 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()],
});（可选）步骤 8：当语言环境改变时更改 URL
为了允许用户切换语言并相应地更新 URL，您可以创建一个 LocaleSwitcher 组件。该组件将使用 intlayer 中的 getLocalizedUrl 和 svelte-spa-router 中的 push。
src/lib/LocaleSwitcher.svelte
复制代码
复制代码到剪贴板
<script lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";import { push } from "svelte-spa-router";export let currentLocale: string | undefined = undefined;// 获取语言环境信息const { locale, availableLocales } = useLocale();// 处理语言环境变化const changeLocale = (event: Event) => { plugins: [intlayerProxy(), // should be placed first svelte(), intlayer()],});（可选）步骤 8：当语言环境变化时更改 URL
为了允许用户切换语言并相应地更新 URL，您可以创建一个 LocaleSwitcher 组件。该组件将使用来自 intlayer 的 getLocalizedUrl 和来自 svelte-spa-router 的 push。
src/lib/LocaleSwitcher.svelte
复制代码
复制代码到剪贴板
<script lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";import { push } from "svelte-spa-router";export let currentLocale: string | undefined = undefined;// 获取语言环境信息const { locale, availableLocales } = useLocale();// 处理语言环境变化const changeLocale = (event: Event) => { const target = event.target as HTMLSelectElement; const newLocale = target.value; const currentUrl = window.location.pathname; const url = getLocalizedUrl( currentUrl, newLocale); push(url);};</script><div class="locale-switcher"> <select value={currentLocale ?? $locale} onchange={changeLocale}> {#each availableLocales ?? [] as loc} <option value={loc}> {getLocaleName(loc)} </option> {/each} </select></div>Git 配置
建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。
为此，您可以在 .gitignore 文件中添加以下指令：
bash
复制代码
复制代码到剪贴板
# 忽略 Intlayer 生成的文件.intlayerVS Code 扩展
为了提升您使用 Intlayer 的开发体验，您可以安装官方的 Intlayer VS Code 扩展。
该扩展提供：
- 翻译键的 自动补全。
- 缺失翻译的 实时错误检测。
- 翻译内容的 内联预览。
- 轻松创建和更新翻译的 快速操作。
有关如何使用该扩展的更多详细信息，请参阅 Intlayer VS Code 扩展文档。
(可选) 步骤 1 : 提取组件内容
如果您有现有的代码库，转换数千个文件可能会非常耗时。
为了简化此过程，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 或其他步骤中调用该脚本。