如何将默认首页重定向至index页面？解决JS页面判断失效问题

嘿，这个问题我之前做项目的时候也踩过坑！核心问题就是根域名访问（example.com）和带index.html的地址被浏览器当成了两个不同的URL，导致你的JS判断逻辑失效。这里给你几个可行的解决思路，从根源到应急方案都有：

方法1：服务器端重定向（最推荐） #

服务器端做重定向是最稳妥的方案，既能从根源统一访问地址，还不会出现前端跳转的闪屏问题，对SEO也更友好。

如果你用Apache #

在网站根目录的.htaccess文件里添加这段配置：

RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^$ /index.html [R=301,L]

简单解释下：RewriteCond专门匹配用户直接访问根域名的情况，RewriteRule会把空路径（也就是根地址）永久重定向（301）到/index.html，L表示这是最后一条规则，避免后续规则干扰。

如果你用Nginx #

在你的站点配置的server块里加入这段代码：

server {
    listen 80;
    server_name example.com;
    # 精准匹配根路径访问
    location = / {
        return 301 /index.html;
    }
    # 保留你原有的其他配置，比如静态文件处理、反向代理等
}

location = /是精准匹配，只有当用户访问根地址时才会触发重定向，不会影响其他页面。

方法2：前端JS重定向（应急方案） #

如果你暂时没法修改服务器配置，也可以在首页的JS里先做判断跳转——记得把这段代码放在页面最顶部（比如<head>里），尽量减少页面闪屏的情况：

// 先判断当前是不是根域名访问
const currentHref = window.location.href;
if (currentHref === 'https://example.com/' || currentHref === 'http://example.com/') {
    // 用replace替换历史记录，避免用户点返回按钮又跳回根地址
    window.location.replace('https://example.com/index.html');
}

不过这个方法有个小瑕疵：浏览器会先加载根页面的内容，再执行JS跳转，用户可能会看到瞬间的页面闪烁。

方法3：修改JS判断逻辑（不用重定向） #

其实你也可以不用改访问地址，直接调整你的判断逻辑，兼容两种路径情况：

const currentPath = window.location.pathname;
// 判断路径是空或者/，就判定为首页
if (currentPath === '' || currentPath === '/') {
    // 执行你的格式调整逻辑
}

这个方法更简单，不需要动服务器或者做跳转，直接让你的JS逻辑同时兼容根地址和index.html地址。

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