---
createdAt: 2025-05-20
updatedAt: 2025-06-29
title: 如何配置基于域名的路由？
description: 学习如何配置基于域名的路由。
keywords:
  - 域名
  - 路由
  - intlayer
  - 配置
  - 中间件
  - react-router
  - vue-router
  - next.js
  - vite
  - 框架
slugs:
  - frequent-questions
  - domain-routing
---

# 如何使用 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.tsx
import {
  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. **更易维护**：每种语言的部署相互独立
