Angular 部署多個(gè)語(yǔ)言環(huán)境

部署多個(gè)語(yǔ)言環(huán)境

如果 ?myapp ?是包含項(xiàng)目可分發(fā)文件的目錄，你通常會(huì)在語(yǔ)言環(huán)境目錄中為不同的語(yǔ)言環(huán)境提供不同的版本，比如法語(yǔ)版的 ?myapp/fr? 和西班牙語(yǔ)版的 ?myapp/es?。

帶有 ?href? 屬性的 HTML ?base ?標(biāo)簽指定了相對(duì)鏈接的基本 URI 或 URL。如果你將工作空間構(gòu)建配置文件 ?angular.json? 中的 ?"localize"? 選項(xiàng)設(shè)置為 ?true ?或語(yǔ)言環(huán)境 ID 數(shù)組，CLI 會(huì)為應(yīng)用程序的每個(gè)版本調(diào)整 base ?href?。要為應(yīng)用程序的每個(gè)版本調(diào)整 base ?href?，CLI 會(huì)將語(yǔ)言環(huán)境添加到配置的 ?"baseHref"? 中。在工作區(qū)配置文件 ?angular.json? 中為每個(gè)語(yǔ)言環(huán)境指定 ?"baseHref"?。以下示例展示了設(shè)置為空字符串的 ?"baseHref"?。

"projects": {
    "angular.io-example": {
      // ...
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            "baseHref": ""
          }
        }
      },
      "architect": {
        // ...
      }
    }
  }
  // ...
}

此外，要在編譯時(shí)聲明 base ?href?，請(qǐng)將在 CLI 中使用帶有 ?--baseHref? 選項(xiàng)的 ?ng build? 。

配置服務(wù)器

多語(yǔ)言的典型部署方式是為來(lái)自不同子目錄的每種語(yǔ)言提供服務(wù)。使用 ?Accept-Language? HTTP 標(biāo)頭將用戶重定向到瀏覽器中定義的首選語(yǔ)言。如果用戶未定義首選語(yǔ)言，或者首選語(yǔ)言不可用，則服務(wù)器將回退到默認(rèn)語(yǔ)言。要更改語(yǔ)言，就轉(zhuǎn)到另一個(gè)子目錄。 子目錄的更改通常使用應(yīng)用程序中實(shí)現(xiàn)的菜單進(jìn)行。

Nginx 范例

以下示例展示了 Nginx 配置。

http {
    # Browser preferred language detection (does NOT require
    # AcceptLanguageModule)
    map $http_accept_language $accept_language {
        ~*^de de;
        ~*^fr fr;
        ~*^en en;
    }
    # ...
}

server {
    listen 80;
    server_name localhost;
    root /www/data;

    # Fallback to default language if no preference defined by browser
    if ($accept_language ~ "^$") {
        set $accept_language "fr";
    }

    # Redirect "/" to Angular application in the preferred language of the browser
    rewrite ^/$ /$accept_language permanent;

    # Everything under the Angular application is always redirected to Angular in the
    # correct language
    location ~ ^/(fr|de|en) {
        try_files $uri /$1/index.html?$args;
    }
    # ...
}

Apache 范例

以下示例展示了 Apache 配置。

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot /www/data
    <Directory "/www/data">
        RewriteEngine on
        RewriteBase /
        RewriteRule ^../index\.html$ - [L]

        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule (..) $1/index.html [L]

        RewriteCond %{HTTP:Accept-Language} ^de [NC]
        RewriteRule ^$ /de/ [R]

        RewriteCond %{HTTP:Accept-Language} ^en [NC]
        RewriteRule ^$ /en/ [R]

        RewriteCond %{HTTP:Accept-Language} !^en [NC]
        RewriteCond %{HTTP:Accept-Language} !^de [NC]
        RewriteRule ^$ /fr/ [R]
    </Directory>
</VirtualHost>