什么是 browser-sync-middleware-spa？
browser-sync-middleware-spa 是一个可以与 browser-sync 配合使用的中间件，它可以让单页应用（Single Page Application，SPA）在浏览器中进行开发和调试时更加方便和高效。
如何使用 browser-sync-middleware-spa？
首先，你需要在你的项目中安装 browser-sync 和 browser-sync-middleware-spa：
npm install browser-sync browser-sync-middleware-spa --save-dev
安装完成后，我们可以在项目的脚本中使用 browser-sync 命令来启动一个本地服务器，例如：
browser-sync start --server
这样，我们就可以在浏览器中通过访问 http://localhost:3000 来访问我们的应用了。
接下来，我们需要在 browser-sync 的配置中加入 browser-sync-middleware-spa 中间件的相关配置。首先，我们需要在 middlewares 选项中加入 browserSyncMiddleware，如下所示：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- --- - ---------------------------------------
-------------
------- -
-------- -----
----------- -
-----
--------- ---------- -- ---- ------- --- --------
--
-
-
---上面的配置中，selector 选项的值是你的应用的根节点的选择器，一般情况下可以使用 [ng-app] 来匹配 AngularJS 应用的根节点。
配置完成后，我们可以再次启动 browser-sync，这样会在浏览器中自动打开我们的应用，并且访问任意路由时都会自动刷新页面，而不是跳转到新的页面。
示例代码
下面是一个完整的示例代码，其中包括了 AngularJS 应用的相关代码：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
------------------ --- ---------- ---- --------- ---------------
------- -----------------------------------------------------------
--------
----------------------- ---
-------------------------------- -
--------------
---------- -
------------ ------------
----------- ----------------
--
--------------- -
------------ -------------
----------- -----------------
---
--
----------------------------- -------- -------- -
------------ - -------
--
------------------------------ -------- -------- -
------------ - --------
--
---------
-------
------
-----
-- ------------------
-- ------------------------
------
---- --------------
-------
-------总结
使用 browser-sync-middleware-spa 中间件可以让单页应用在浏览器开发和调试时更加方便和高效，而不需要手动刷新页面或者跳转到新的页面。希望这篇教程对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde521d