如何使用 Intlayer 配置基于域名的路由，而不是使用 /[locale]/ 路径？

    简短回答

    基于域名的路由比基于路径的路由（example.com/[locale]/）更简单，因为你可以跳过所有中间件和路由配置。只需将你的应用部署到每个语言域名，并为每个域名设置一个环境变量。

    逐步操作

    1. 每个域名部署一次（example.com、exemple.fr、ejemplo.es 等）。
    2. 对于每次部署，设置 LOCALE（以及常用的 Intlayer 环境变量）为该域名应提供的语言环境。
    3. 在你的 intlayer.config.[ts|js] 中将该变量作为 defaultLocale 引用。
    ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 域名决定语言环境  },  // ... 你的其他配置};export default config;

    就是这么简单--对于 Next.js、Vite + React、Vite + Vue 等框架，效果相同。

    如果所有域名都指向同一个部署怎么办？

    如果所有域名都指向同一个应用包，您需要在运行时检测主机，并通过提供者手动传递语言环境。

    对于 Next.js

    tsx
    // src/IntlayerProvider.tsximport {  IntlayerClientProvider,  type IntlayerClientProviderProps,} from "next-intlayer";import { IntlayerServerProvider } from "next-intlayer/server";import type { FC } from "react";export const IntlayerProvider: FC<IntlayerClientProviderProps> = ({  children,  locale,}) => {  const resolvedLocale = locale ?? getLocaleFromHostname(); // 解析语言环境，优先使用传入的 locale，否则调用自定义函数获取  return (    <IntlayerServerProvider locale={resolvedLocale}>      <IntlayerClientProvider locale={resolvedLocale}>        {children}      </IntlayerClientProvider>    </IntlayerServerProvider>  );};

    对于 Vue

    ts
    import { createApp } from "vue";import { installIntlayer } from "vue-intlayer";import App from "./App.vue";import { router } from "./routes";const app = createApp(App);app.use(router);installIntlayer(app, getLocaleFromHostname()); // 使用自定义函数获取主机名对应的语言环境app.mount("#app");

    请将 getLocaleFromHostname() 替换为您自己的查找逻辑。

    更新您的语言切换器

    使用基于域名的路由时，切换语言意味着跳转到另一个域名：

    ts
    const { locale } = useLocale();function changeLanguage(target: Locale) {  window.location.href = domainForLocale[target]; // 跳转到目标语言对应的域名}

    基于域名路由的优势

    1. 配置更简单：无需配置 intlayerProxy、generateStaticParams、react-router 或 vue-router
    2. 更好的SEO：每种语言都有自己的域名
    3. 更简洁的URL：路径中没有语言前缀
    4. 更易维护：每种语言的部署相互独立