如何移除URL中的.html后缀？纯JS本地页面技术咨询

根据你的场景（纯JS页面、本地JSON数据、使用127.0.0.1:5501这类本地服务器），提供两种可行方案：

方案一：配置本地服务器（推荐，彻底解决刷新问题） #

你当前使用的127.0.0.1:5501大概率是VS Code的Live Server插件，只需添加简单配置即可让无后缀URL指向对应HTML文件：

1. 修改跳转链接
   把原链接的.html后缀去掉：

<li><a href="./products">Продукти</a></li>

2. 添加Live Server配置文件
   在项目根目录新建.live-server.json文件，写入规则：

{
  "rewrite": [
    {
      "from": "^/products$",
      "to": "/products.html"
    }
  ]
}

此配置会让服务器将/products路径的请求，自动映射到/products.html文件。重启Live Server后，访问http://127.0.0.1:5501/products就能正常打开页面，刷新也不会报错。

方案二：纯前端History API实现（适合临时跳转美化，刷新有局限） #

如果不想依赖服务器配置，可以用HTML5 History API拦截跳转、修改URL，但直接刷新无后缀URL会报错（浏览器找不到对应资源）：

1. 修改跳转链接
   同样去掉.html后缀：

<li><a href="./products">Продукти</a></li>

2. 添加全局跳转拦截逻辑
   在主页面和产品页面的JS中加入以下代码：

// 拦截所有a标签点击
document.addEventListener('click', function(e) {
  const targetLink = e.target.closest('a');
  if (targetLink && !targetLink.href.includes('.html')) {
    e.preventDefault();
    const targetPath = new URL(targetLink.href).pathname;
    
    // 修改URL地址栏
    history.pushState({ page: targetPath }, '', targetPath);
    
    // 加载对应页面内容
    loadTargetPage(targetPath);
  }
});

// 处理浏览器前进/后退
window.addEventListener('popstate', function(e) {
  if (e.state?.page) {
    loadTargetPage(e.state.page);
  }
});

// 加载目标页面内容的函数
function loadTargetPage(path) {
  if (path === '/products') {
    // 加载products.html并替换页面内容
    fetch('./products.html')
      .then(res => res.text())
      .then(html => {
        document.body.innerHTML = html;
        // 重新加载产品页面的JS逻辑
        const script = document.createElement('script');
        script.src = './你的产品页面JS文件名.js';
        document.body.appendChild(script);
      });
  }
}

注意事项 #

• 方案一能彻底解决URL美化+刷新正常的问题，是生产场景的标准做法；
• 方案二仅适合跳转过程中的URL美化，无法处理直接刷新无后缀URL的情况；
• 你现有的fetch('/products.json')请求不受任何方案影响，只要文件路径正确即可正常获取数据。

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