如何移除URL中的.html后缀？自学Web开发者寻求解决方案

根据你的需求，要把带.html后缀的URL改成无后缀形式，同时保证原有链接不失效，下面分不同场景给出具体实现方法：

Apache服务器 #

如果你的站点部署在Apache上，通过.htaccess文件配置URL重写即可：

# 开启重写引擎
RewriteEngine On

# 强制将带.html的URL重定向到无后缀版本（301永久重定向，利于SEO）
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /([^\ ]+)\.html
RewriteRule ^(.*)\.html$ /$1 [R=301,L]

# 允许访问无后缀URL时加载对应的.html文件
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html [L]

Nginx服务器 #

在Nginx的站点配置文件的server块中添加以下规则：

# 重定向带.html的URL到无后缀版本
rewrite ^/(.*)\.html$ /$1 permanent;

# 让无后缀URL匹配对应的.html文件
location / {
    try_files $uri $uri.html $uri/ =404;
}

静态站点生成器场景 #

如果你用Jekyll、Hugo这类工具生成站点，直接修改配置即可：

• Jekyll：在_config.yml中设置permalink: pretty，生成的URL会自动去掉.html后缀
• Hugo：在config.toml中设置uglyURLs = false，默认就会生成无后缀的干净URL
• Next.js：使用静态导出时，将页面文件放在pages目录下（比如pages/about-us.js），构建后会自动生成/about-us路径

纯静态文件手动处理 #

如果是手动编写的静态页面，无需服务器配置的话：

1. 创建名为about-us的文件夹
2. 将原来的about-us.html文件移动到该文件夹内，并重命名为index.html
3. 在原来的about-us.html文件中添加301重定向代码，避免旧链接失效：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="refresh" content="0; url=/about-us">
    <link rel="canonical" href="/about-us">
</head>
<body>
    页面正在跳转，请<a href="/about-us">点击这里</a>继续访问
</body>
</html>

注意事项 #

• 替换站点内所有内部链接为无后缀形式
• 更新站点地图（sitemap.xml），提交新URL到搜索引擎
• 使用301永久重定向，确保搜索引擎权重不会丢失

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