移除URL中.html扩展名失败，.htaccess配置无效求解决

为什么你的配置不生效？ #

• 环境不支持.htaccess：.htaccess是Apache服务器专属配置文件，VS Code Live Server用的是Node.js的Express服务器，本地直接打开文件是file://协议（完全不经过服务器），如果Replit没选Apache环境，也不会识别.htaccess，这三个场景自然都不生效。
• 规则只做了一半：你当前的规则是让服务器把example.com/page的请求转发到page.html，但没处理把example.com/page.html重定向到example.com/page，所以原来的带后缀URL不会自动变更。
• 直接改文件名导致404：删掉文件的.html后缀后，页面内的旧链接（比如指向page.html的跳转）找不到对应文件，而且服务器没配置映射规则，自然返回404。

分场景解决方法 #

1. VS Code Live Server本地开发 #

Live Server不支持.htaccess，两种方案可选：

• 自定义路由映射：在项目根目录的.vscode/settings.json里添加规则，自动把无后缀请求映射到.html文件：

  {
    "liveServer.settings.mount": [
      ["^(.*)$", "$1.html"]
    ]
  }
  

  这样访问localhost:5500/page就会加载page.html。
• 换用Apache本地服务器：安装XAMPP或WAMP，把项目放到服务器根目录（比如XAMPP的htdocs文件夹），启动Apache后，你的.htaccess规则就能正常工作。

2. Replit线上部署 #

先确保Replit用的是Apache环境，再完善.htaccess规则：

• 切换到Apache环境：在Replit创建项目时选择Apache模板，或者修改replit.nix添加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]
  

3. 通用注意事项 #

• 不要直接删除现有文件的.html后缀，保留原文件才能保证旧链接和服务器规则正常工作。
• 把页面内的所有链接从page.html改成page（相对路径），这样用户点击后直接显示无后缀的URL。

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