国际化 (i18n)

通过 onBeforeRoute() hook 可以实现国际化（i18n）

// /renderer/_default.page.route.js

export { onBeforeRoute }

function onBeforeRoute(pageContext) {
  const { urlWithoutLocale, locale } = extractLocale(pageContext.urlOriginal)
  return {
    pageContext: {
      // 使 `locale` 在 `pageContext.locale` 中可用
      locale,
      // 重写 `pageContext.urlOriginal`
      urlOriginal: urlWithoutLocale
    }
  }
}

// 我们也可以使用库而不是实现我们自己的语言环境探测机制
function extractLocale(url) {
  // 确定语言环境，例如：
  //  extractLocale('/en-US/film/42').locale === 'en-US'
  //  extractLocale('/de-DE/film/42').locale === 'de-DE'
  const locale = /* ... */

  // 移除语言，例如：
  //  extractLocale('/en-US/film/42').urlWithoutLocale === '/film/42'
  //  extractLocale('/de-DE/film/42').urlWithoutLocale === '/film/42'
  //  ...
  urlWithoutLocale = /* ... */

  return { locale, urlWithoutLocale }
}

在渲染页面时，onBeforeRoute() 是 vite-plugin-ssr 调用的第一个 hook，这意味着我们应用程序的其余部分不再需要处理本地化的 URL，我们可以简单地使用 pageContext. locale 代替

在所有 React/Vue 组件中访问 pageContext.locale，请参考指南 > 随处访问 pageContext

此技术还适用于：

?lang=fr 查询参数
domain.fr 域名 TLDs
Accept-Language: fr-FR headers

Accept-Language header 可用于将用户重定向到正确的本地化后的 URL （例如 URL /about + Header Accept-Language: de-DE => 重定向到 /de-DE/about）。一旦用户被重定向到本地化后的 URL，我们就可以使用上述技术。我们可以独立于 vite-plugin-ssr 使用服务器重定向（如 Express.js）

出于 SEO 和 UX 的原因，使用 Accpet-Language header 为同一 URL 显示出不同的语言被认为是不好的做法。建议仅使用 Accpet-Language 来重定向用户

Example

参考 /examples/i18n/.

预渲染

对于 pre-rendering，我们可以使用 onBeforePrerender()

// _default.page.server.js

export { onBeforePrerender };

const locales = ["en-US", "de-DE", "fr-FR"];

function onBeforePrerender(prerenderContext) {
  const pageContexts = [];
  prerenderContext.pageContexts.forEach((pageContext) => {
    pageContexts.push({
      ...pageContext,
      locale: localeDefault,
    });
    // 我们将本地化页面添加到将要预渲染的页面列表中
    locales
      .filter((locale) => locale !== localeDefault)
      .forEach((locale) => {
        pageContexts.push({
          ...pageContext,
          urlOriginal: `/${locale}${pageContext.urlOriginal}`,
          locale,
        });
      });
  });
  return {
    prerenderContext: {
      pageContexts,
    },
  };
}

有关使用 onBeforePrerender() 的示例，请参考 /examples/i18n/

✍ Edit this page