Angular多语言构建在Vercel上的自动路由重定向问题

一、修复Vercel根路径自动重定向问题 #

你的vercel.json配置只处理了英文场景，且未覆盖单页应用路由刷新的404问题，替换为以下配置：

{
  "redirects": [
    // 匹配格鲁吉亚语优先的请求
    {
      "source": "/",
      "has": [
        {
          "type": "header",
          "key": "accept-language",
          "value": "^ka($|,)"
        }
      ],
      "destination": "/ka",
      "permanent": false
    },
    // 匹配俄语优先的请求
    {
      "source": "/",
      "has": [
        {
          "type": "header",
          "key": "accept-language",
          "value": "^ru($|,)"
        }
      ],
      "destination": "/ru",
      "permanent": false
    },
    // 匹配英语优先的请求
    {
      "source": "/",
      "has": [
        {
          "type": "header",
          "key": "accept-language",
          "value": "^en($|,)"
        }
      ],
      "destination": "/en",
      "permanent": false
    },
    // 默认 fallback 到英文版本
    {
      "source": "/",
      "destination": "/en",
      "permanent": false
    }
  ],
  // 处理各语言版本的单页路由刷新404
  "rewrites": [
    {
      "source": "/en/(.*)",
      "destination": "/en/index.html"
    },
    {
      "source": "/ka/(.*)",
      "destination": "/ka/index.html"
    },
    {
      "source": "/ru/(.*)",
      "destination": "/ru/index.html"
    }
  ]
}

配置说明 #

• 使用redirects而非rewrites：确保浏览器URL跳转到对应语言的baseHref路径，避免Angular资源加载错误
• 覆盖所有支持的语言规则，同时添加默认兜底逻辑
• rewrites规则保证各语言版本下的子路由刷新时不会出现404

二、实现Angular内部语言切换与持久化 #

1. 创建语言管理服务 #

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class LanguageService {
  supportedLangs = ['en', 'ka', 'ru'];
  currentLang: string;

  constructor(private router: Router) {
    // 优先读取本地存储的语言，无则取浏览器默认语言
    const savedLang = localStorage.getItem('app-lang');
    this.currentLang = savedLang && this.supportedLangs.includes(savedLang) 
      ? savedLang 
      : this.getBrowserDefaultLang();
  }

  getBrowserDefaultLang(): string {
    const browserLang = navigator.language.split('-')[0];
    return this.supportedLangs.includes(browserLang) ? browserLang : 'en';
  }

  switchLang(lang: string) {
    if (this.supportedLangs.includes(lang) && lang !== this.currentLang) {
      this.currentLang = lang;
      localStorage.setItem('app-lang', lang);
      // 跳转到对应语言版本的根路径
      this.router.navigateByUrl(`/${lang}`);
    }
  }
}

2. 初始化语言路由校验 #

在app.module.ts中添加初始化逻辑，确保用户直接访问子路径时自动补全语言前缀：

import { APP_INITIALIZER } from '@angular/core';
import { LanguageService } from './services/language.service';

export function initializeLanguage(langService: LanguageService) {
  return () => {
    const currentPath = window.location.pathname;
    const hasLangPrefix = langService.supportedLangs.some(
      lang => currentPath.startsWith(`/${lang}/`) || currentPath === `/${lang}`
    );
    // 无语言前缀时自动跳转
    if (!hasLangPrefix) {
      window.location.href = `/${langService.currentLang}`;
    }
  };
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeLanguage,
      deps: [LanguageService],
      multi: true
    }
  ]
})
export class AppModule { }

3. 添加语言切换组件 #

创建一个下拉切换组件：

<select [(ngModel)]="selectedLang" (change)="onLangChange($event)">
  <option value="en">English</option>
  <option value="ka">ქართული</option>
  <option value="ru">Русский</option>
</select>

组件逻辑：

import { Component } from '@angular/core';
import { LanguageService } from '../services/language.service';

@Component({
  selector: 'app-language-switcher',
  templateUrl: './language-switcher.component.html'
})
export class LanguageSwitcherComponent {
  selectedLang: string;

  constructor(private langService: LanguageService) {
    this.selectedLang = langService.currentLang;
  }

  onLangChange(event: any) {
    this.langService.switchLang(event.target.value);
  }
}

三、路由配置注意事项 #

确保Angular路由使用相对路径，无需添加语言前缀（构建后每个版本会自动使用对应baseHref）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

内容的提问来源于stack exchange，提问作者Irakli Tulashvili