如何使用11ty去除URL末尾的斜杠/

1. 修正页面permalink配置 #

你当前的YAML frontmatter写法出错了，多余的管道符导致permalink解析异常。直接改成：

---
permalink: "/About"
---

2. 全局配置11ty禁用尾斜杠 #

在.eleventy.js里添加trailingSlash配置，让11ty生成单文件而非文件夹结构：

module.exports = function(eleventyConfig) {
  return {
    trailingSlash: "never",
    dir: {
      input: "views", // 确认输入目录指向你的view文件夹
      output: "_site"
    }
    // 保留其他原有配置
  };
};

这个配置会让About页面生成_site/About.html，而非_site/About/index.html，从根源上避免尾斜杠的目录结构。

3. 配置Vite开发服务器路由重写 #

Vite默认不会把/About映射到/About.html，在vite.config.js里加rewrite规则：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    rewrite: {
      // 单个页面规则
      '^/About$': '/About.html',
      // 批量处理所有非文件路径（适合多页面场景）
      // '^/([^.]+)$': '/$1.html'
    }
  },
  build: {
    outDir: '_site', // 让Vite构建产物输出到11ty的输出目录
  }
});

4. 验证效果 #

运行npx @11ty/eleventy生成静态文件后，检查_site目录下是否存在About.html（而非About文件夹）。启动Vite服务器后，访问http://localhost:3000/About就能正常加载页面了。如果需要兼容带斜杠的路径，可以再加一条rewrite规则把/About/重定向到/About。

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