Angular国际化(i18n)应用部署Nginx后无法加载字体问题

问题描述 #

• Angular国际化应用部署在本地Nginx服务器，页面功能正常，但字体文件无法加载
• 浏览器控制台显示字体请求指向Nginx根目录（如/assets/fonts/xxx.ttf），而非对应语言包目录下的assets文件夹（如/en/assets/fonts/xxx.ttf）

文件夹结构说明 #

Nginx根目录html下包含各语言子目录：en、en-CA、en-US，每个语言目录内有assets/fonts文件夹存放字体文件，以及Angular编译生成的index.html等应用文件。

当前Nginx配置 #

http {
    include       mime.types;
    default_type  application/octet-stream;
   
    sendfile        on;
    keepalive_timeout  65;

    map $http_accept_language $accept_language {
        ~*^en-US en-US;
        ~*^en-CA en-CA;
        ~*^en en;
    }

server {
    listen 80;
    server_name localhost;
    root html;

    if ($accept_language ~ "^$") {
        set $accept_language "en";
    }

    rewrite ^/$ /$accept_language permanent;

    location ~ ^/(en-CA|en-US|en) {
        try_files $uri /$1/index.html?$args;
    }
    
    location ~* \.(eot|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }
    # ...
}

解决方案 #

方案1：修正Angular编译时的base href（推荐） #

编译Angular应用时，为每个语言包指定对应语言目录作为base-href，Angular会自动为所有资源请求添加语言目录前缀：

# 编译en版本
ng build --localize --base-href /en/
# 编译en-CA版本
ng build --localize --base-href /en-CA/
# 编译en-US版本
ng build --localize --base-href /en-US/

重新部署编译后的文件后，字体请求会自动指向/[lang]/assets/fonts/路径，无需修改Nginx配置。

方案2：修改Nginx配置重写字体请求路径 #

如果无法重新编译Angular应用，可通过Nginx重写规则将根目录下的字体请求转发到对应语言目录：
修改Nginx的server块配置，添加字体请求重写规则：

server {
    listen 80;
    server_name localhost;
    root html;

    if ($accept_language ~ "^$") {
        set $accept_language "en";
    }

    rewrite ^/$ /$accept_language permanent;

    # 处理语言目录下的应用请求
    location ~ ^/(en-CA|en-US|en) {
        try_files $uri /$1/index.html?$args;
        
        # 该语言目录下的字体直接返回
        location ~* \.(eot|ttf|woff)$ {
            add_header Access-Control-Allow-Origin *;
        }
    }
    
    # 捕获根目录下的字体请求，重定向到当前语言目录
    location ~* ^/assets/fonts/.*\.(eot|ttf|woff)$ {
        rewrite ^/assets/fonts/(.*)$ /$accept_language/assets/fonts/$1 permanent;
        add_header Access-Control-Allow-Origin *;
    }
}

此配置会将所有指向/assets/fonts/的字体请求，重定向到浏览器偏好语言对应的目录下的字体文件。

内容的提问来源于stack exchange，提问作者Libin Jose