Angular+Scully尾斜杠路由301跳转及Docker构建报错咨询

你之前参考的xxxx/.后缀+重写Location.stripTrailingSlash的方案，是Angular客户端渲染场景下保留尾斜杠的hack手段，仅在浏览器端运行时生效。Scully预渲染阶段会直接读取Angular注册的路由表做匹配校验，不会执行你注入的客户端重写逻辑，会把末尾带/.的路径当成真实路由校验，自然抛出路由不存在的错误。该方案和Scully的预渲染逻辑天生不兼容，不适合静态预渲染项目。

直接利用Scully原生配置+Nginx规则处理尾斜杠，不需要修改Angular业务路由代码，彻底避免301跳转损耗：

• 第一步：回退之前的hack修改
  移除所有路由末尾的/.后缀，删除自定义注入的Location.stripTrailingSlash重写逻辑，恢复Angular路由默认配置。
• 第二步：配置Scully原生尾斜杠规则
  Scully v2.x原生支持尾斜杠处理，不需要额外hack，修改项目根目录下的scully.<你的项目名>.config.ts：

import { ScullyConfig } from '@scullyio/scully';

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: '你的项目名',
  outDir: './dist/static',
  // 核心配置：给所有预渲染路由自动添加尾斜杠，生成对应目录结构
  trailingSlash: 'add',
  routes: {
    // 你的原有路由配置保持不变
  }
};

配置后Scully预渲染生成的静态文件会按/xxxx/index.html的目录结构存放，访问/xxxx/时会直接命中对应静态文件，不会触发跳转。

• 第三步：调整Nginx配置消除多余301
  修改Nginx站点配置，统一路由匹配规则，避免多层跳转：

server {
    listen 80;
    server_name 你的域名;
    root /usr/share/nginx/html;
    index index.html;

    # 静态资源直接返回，不做路由匹配
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }

    # 强制所有非文件路径带尾斜杠，仅做一次301跳转，后续缓存直接命中
    rewrite ^([^.]*[^/])$ $1/ permanent;

    # 匹配带尾斜杠的路径，优先返回Scully预渲染的静态文件
    location / {
        try_files $uri $uri/index.html /index.html;
    }
}

• 第四步：Docker构建逻辑不需要调整
  你当前使用的node:14.19.1-alpine+Chromium的基础镜像配置没有问题，恢复路由后执行npm run build && npm run scully不会再出现路由匹配错误。

如果一定要保留原有/.后缀的路由写法，需要自定义Scully路由转换插件：在路由校验阶段拦截所有带/.后缀的路径，替换为Scully可识别的标准格式，同时修改Puppeteer渲染阶段的路径访问规则。该方案维护成本极高，后续升级Angular、Scully版本时大概率出现兼容问题，不要在生产环境使用。

部署完成后用curl测试响应头：

• 执行curl -I http://你的域名/xxxx，最多只会出现1次301跳转到/xxxx/地址
• 执行curl -I http://你的域名/xxxx/，直接返回200状态码，不会出现额外跳转

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