angular - angular i18n 应用程序的 Nginx 配置

Question

我使用支持法语和英语的 i18n 构建了一个 angular-5 应用程序。然后我为每种支持的语言部署了一个单独的应用程序版本

 - dist    |___ en/    |    |__ index.html    |___ fr/         |__ index.html

我还添加了以下 nginx 配置以提供两种语言的应用程序；

server {    root /var/www/dist;    index index.html index.htm;    server_name host.local;    location ^/(fr|en)/(.*)$ {        try_files $2 $2/ /$1/index.html;    }}

我想做的是为这两个应用程序提供服务，并允许在英语和法语版本之间切换。

比方说我在 host.local/en/something如果我切换到 host.local/fr/something，我应该得到“something”页面的法语版本。

使用我分享的 nginx 配置，每次我在浏览我的应用程序时刷新页面时都会收到 404 未找到错误，这也阻止我独立浏览我的应用程序并在它们之间切换。

我错过了什么？实现该目标的适当 Nginx conf 是什么？

Answer 1

我在 iis 上做了同样的事情，首先你必须使用“base-href”选项构建你的应用程序:

 ng build --output-path=dist/fr --prod --bh /fr/
 ng build --output-path=dist/en --prod --bh /en/

nginx 使用这个配置

location /fr/ {
  alias /var/www/dist/fr/;
  try_files $uri$args $uri$args/ /fr/index.html;
}
location /en/ {
 alias /var/www/dist/en/;
 try_files $uri$args $uri$args/ /en/index.html;
}

对于从/en/someroute 到/fr/someroute 的导航，您可以在具有语言切换器的组件中获取当前路由器 url

getCurrentRoute() {
    return this.router.url;
}

当您点击语言选择器时，您将重定向到与所选语言相同的路径:

 <li *ngFor="let language of languages;let i=index" >
    <a  href="/{{language.lang}}/#{{getCurrentRoute()}}"  (click)="changeLanguage(language.lang)">
        {{language.lang}}
    </a>
 </li>

更改语言方法

changeLanguage(lang: string) {
    const langs = ['en', 'fr'];
    this.languages = this.allLanguages.filter((language) => {
        return language.lang !== lang;
    });
    this.curentLanguage = this.allLanguages[langs.indexOf(lang)].name
    localStorage.setItem('Language', lang);
    if (isDevMode()) {
        location.reload(true);
    }
}