角度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我应该得到"某事"页面的法语版本.

使用我共享的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);
    }
}

Answer 2

构建后：

ng build --prod --base-href /fr/ --output-path dist/fr
ng build --prod --base-href /en/ --output-path dist/en

将构建复制到 nginx 服务目录：

cp -r dist/* /usr/share/nginx/my-app

然后我发现了 2 个不同的 NGINX 配置对我有用：

使用根路径

server {
    root /usr/share/nginx/my-app;
    location /en/ {
        autoindex on;
        try_files $uri$args $uri$args/ /en/index.html;
    }

    location /fr/ {
        autoindex on;
        try_files $uri$args $uri$args/ /fr/index.html;
    }

    # Default to FR
    location / {
        # Autoindex is disabled here + the $uri$args/ is missing from try_files
        try_files $uri$args /fr/index.html;
    }
}

使用别名

server {
    listen 80 default_server;
    index index.html;

    location /en/ {
        alias /usr/share/nginx/my-app/en/;
        try_files $uri$args $uri$args/ /en/index.html;
    }

    location /fr/ {
        alias /usr/share/nginx/my-app/fr/;
        try_files $uri$args $uri$args/ /fr/index.html;
    }

    # Default to FR
    location / {
        alias /usr/share/nginx/my-app/fr/;
        try_files $uri$args $uri$args/ /fr/index.html;
    }
}

注意：在根路径解决方案中，您可以删除该autoindex on选项，但您还必须从中删除该$uri$args/部分，try_files否则您将得到“ “[目录]”的目录索引被禁止错误“。

仅供参考：您可以在 ROOT 与 ALIAS 上找到有用的那些很好的解释。

版本

Angular CLI: 6.0.7
Node: 8.11.2
Angular: 6.0.3

Answer 3

Angular 9 有一个新选项可以一次性构建所有语言版本。它还通过将区域设置添加到配置的 baseHref 来为每个版本的应用程序设置基本 HREF。

ng build --prod --localize

然后你需要将所有构建复制到 nginx 服务目录

COPY /dist/my-app/ /usr/share/nginx/my-app/

并按照前面的答案中所示配置 nginx。