Angular 5 i18n多语言站点编译部署时403错误求助

嘿，我之前也碰到过类似的i18n部署403问题，大概率是服务器配置或者文件权限这类细节出了问题，咱们一步步排查：

• 服务器目录权限不匹配
  编译后的静态文件（比如dist文件夹）上传到服务器后，Web服务（Nginx/Apache）可能没有读取权限，直接返回403。
  你可以用命令调整权限：

  # 给所有文件设置可读可执行权限
  chmod -R 755 /path/to/your/dist
  # 或者把文件所有者改成Web服务运行用户（Nginx常用www-data）
  chown -R www-data:www-data /path/to/your/dist
  

• i18n动态路由未配置重写规则
  多语言网站通常会有/en/about、/zh/home这类带语言前缀的路径，服务器默认不识别这类非静态文件的路由，会直接拦截返回403。
  以Nginx为例，需要在配置文件里加上try_files规则，让所有请求指向入口文件：

  location / {
      try_files $uri $uri/ /index.html;
  }
  # 如果是部署在子目录，比如https://yourdomain.com/multi-lang/
  location /multi-lang {
      try_files $uri $uri/ /multi-lang/index.html;
  }
  

  要是用Apache，记得先启用mod_rewrite模块，然后在项目根目录的.htaccess里加：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• i18n配置的基础路径错误
  如果你的网站部署在子目录，但i18n或路由配置里的base路径还是默认的/，会导致资源加载路径错误，触发服务器权限拦截。
  比如用Vue I18n + Vue Router的话，要确保路由的base路径和部署目录一致：

  const router = createRouter({
    history: createWebHistory('/multi-lang/'), // 对应你的部署子目录
    routes: [/* 路由规则 */]
  })
  

• 服务器安全规则误拦截
  有些云服务器的WAF、或者Apache的mod_security会把带语言前缀的路径当成可疑请求拦截。
  你可以去看服务器的错误日志（Nginx在/var/log/nginx/error.log，Apache在/var/log/apache2/error.log），看看具体是哪条规则触发的，然后把对应的路径加入安全白名单，或者调整i18n的路径命名避开敏感关键词。

• 编译产物缺失关键文件
  本地编译时如果漏掉了i18n语言包（比如locales文件夹），上传到服务器后找不到对应资源，有些服务器会把这种情况返回403（而非常见的404）。
  先本地跑一遍npm run build，检查dist文件夹里是否包含所有i18n相关的静态资源，确认后再重新上传到服务器。

内容的提问来源于stack exchange，提问作者Débora Gonçalves