如何让Browsersync兼容HTML5 History API？同步设备导航异常求助

我之前做单页应用开发时也碰到过一模一样的问题！Browsersync默认的同步机制不会自动捕获history.pushState触发的地址变化，导致其他同步设备没法跟着导航，得做两步调整来解决：

1. 手动通知Browsersync同步地址变化 #

history.pushState是通过JS主动修改浏览器历史栈的操作，不在Browsersync默认的交互监听范围内，所以我们需要在调用pushState之后，手动触发Browsersync的地址同步事件。修改你的前端脚本如下：

var a = document.querySelector( 'a' );
a.addEventListener('click', function( e ){
  e.preventDefault();
  console.log("ta");
  const newPath = '/foo';
  history.pushState(null, null, newPath);
  
  // 通知Browsersync同步所有设备的地址变化
  if (window.browserSync) {
    browserSync.socket.emit('browser:location', {
      path: newPath,
      hash: ''
    });
  }
});

2. 配置Browsersync服务器支持History API #

另外，单页应用使用History API时，刷新非根路径会出现404错误，所以需要给Browsersync配置一个中间件，把所有请求重定向到入口HTML文件。首先安装依赖：

npm install connect-history-api-fallback --save-dev

然后修改Browsersync的配置文件（比如browserSync.config.js）：

const history = require('connect-history-api-fallback');
const browserSync = require('browser-sync').create();

browserSync.init({
  server: {
    baseDir: './', // 替换成你的项目根目录
    middleware: [history()] // 加入History API支持的中间件
  },
  ghostMode: {
    location: true // 确保地址同步功能处于开启状态
  }
});

这样调整后，不仅history.pushState的导航操作能同步到所有设备，刷新非根路径也不会出现404问题了。

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