Angular 10 i18n配置.htaccess实现跳转并隐藏URL中的地区标识

核心原理：你原有配置中的[R]标记会触发302外部重定向，浏览器会感知到路径变化并更新地址栏。要实现地址栏不显示语言后缀，需要改为内部重写，服务器内部直接映射对应语言目录的资源，不需要返回跳转响应给浏览器。

修改后的完整配置如下：

<IfModule mod_rewrite.c>
    RewriteEngine on
    # 修正重写基路径为项目实际部署目录
    RewriteBase /frontend/

    # 可选：优先读取用户手动选择的语言Cookie，优先级高于浏览器默认语言
    # RewriteCond %{HTTP_COOKIE} preferred_lang=(en|es|fr) [NC]
    # RewriteRule ^(.*)$ %1/$1 [L]

    # 禁止直接访问语言子目录，301跳转到无后缀路径，避免重复内容被搜索引擎收录
    RewriteRule ^(en|es|fr)/(.*)$ $2 [R=301,L,NC]

    # 已经映射到语言目录的请求直接放行，避免重写循环
    RewriteRule ^(en|es|fr)/index\.html$ - [L]

    # 静态资源如果存在直接返回，不需要重写
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule ^(.*)$ - [L]

    # 根路径请求根据Accept-Language内部重写到对应语言目录
    RewriteCond %{HTTP:Accept-Language} ^en [NC]
    RewriteRule ^$ en/ [L]

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

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

    # 默认语言 fallback 到英文
    RewriteRule ^$ en/ [L]

    # Angular路由回退规则：非文件/目录的请求，内部映射到对应语言目录的index.html
    RewriteCond %{HTTP:Accept-Language} ^en [NC]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ en/$1 [L]

    RewriteCond %{HTTP:Accept-Language} ^es [NC]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ es/$1 [L]

    RewriteCond %{HTTP:Accept-Language} ^fr [NC]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ fr/$1 [L]

    # 路由回退默认到英文
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ en/$1 [L]
</IfModule>

修改完.htaccess后需要同步调整Angular构建配置，否则会出现静态资源加载失败问题：

• 构建各语言版本时，base href统一设置为/frontend/，不要携带语言后缀，示例构建命令：

  ng build --prod --localize --base-href /frontend/
  

• 如果需要支持用户手动切换语言，需要新增preferred_lang Cookie存储用户选择的语言，同时开启配置中注释的Cookie优先规则，避免刷新后变回浏览器默认语言。
• 测试前清空浏览器缓存，避免之前的302跳转缓存影响验证效果。

内容的提问来源于stack exchange，提问作者roger medico