前言
当我们开发网站或者 Web 应用时，经常需要进行本地开发，调试，测试工作。而每次修改后刷新网页是十分费时间与精力的。这时候，自动刷新整个页面的 Browser-Sync 工具便是我们的救星，它可以节省我们的大量时间与精力。Browser-Sync-SPA 是 Browser-Sync 的一种扩展，可以用来快速开发 SPA（单页应用程序）。本篇文章将带你深入了解 Browser-Sync-SPA 的使用教程。
安装
在执行以下步骤前，您需要安装 Node.js+NPM 环境。如果您还没有安装，请先前往 https://nodejs.org/ 官网下载安装。
全局安装 Browser-Sync：
npm install -g browser-sync安装 Browser-Sync-SPA:
npm install --save-dev browser-sync-spa
配置
在您的项目根目录下新建 bs-config.js 文件，此文件是 Browser-Sync 配置文件，下面是常用配置参数：
-- -------------------- ---- -------
-------------- - -
------- -
-------- --------
--
----- -----
----- -----------
------- ------
------ -
-------------------
------------------
----------------
-
--其中：
server.baseDir：指定静态文件根目录port：指定端口号，默认为 3000open：是否默认打开浏览器notify：是否启用浏览器提示files：指定监控的文件默认的目录
如果您的项目是 SPA 类型的，则需要添加以下代码，告诉 Browser-Sync 如何处理 HTML5 History 模式的路由：
-- -------------------- ---- -------
----- ------------------ - ----------------------------------------
-------------- - -
------- -
-------- ---------
----------- -
--------------------
-
-
--使用
在 package.json 文件中添加如下命令：
"scripts": {
"start": "browser-sync start --config bs-config.js"
},这样，您可以在项目根目录下使用 npm start 命令启动 Browser-Sync。
示例
以下是一个简单的示例，在该示例中假设您的项目是个 Vue.js 的单页应用程序。
安装
vue-cli：npm install -g vue-cli使用
vue-cli快速搭建一个简单的Vue.js单页应用程序：
vue init webpack myproject cd myproject npm install
- 修改
src/router/index.js文件，使得路由使用 HTML5 History 模式，即mode: 'history'
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- -------------------
------ ----- ---- --------------------
------------------
------ ------- --- -----------
----- ----------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--在项目根目录下安装
browser-sync-spa：npm install --save-dev browser-sync-spa在项目根目录下新建
bs-config.js文件，如下所示：
-- -------------------- ---- -------
----- ------------------ - ----------------------------------------
-------------- - -
------- -
-------- ---------
----------- -
--------------------
-
--
----- -----
----- -----
------- ------
------ -
-------------------
------------------
----------------
-
--- 修改
package.json文件中的scripts，添加如下命令：
"scripts": {
"start": "npm run build && browser-sync start --config bs-config.js --no-open --no-ui --files 'dist/**/*.*'",
"build": "vue-cli-service build"
}执行
npm start命令，浏览器自动打开访问根目录下的index.html。在浏览器中输入路由地址，如
http://localhost:3000/about，查看该路由页面是否正常。
结语
在本篇文章中，我们介绍了 Browser-Sync 以及 Browser-Sync-SPA 的使用方法。他们能够充分提高我们的开发效率，省去不必要的手动刷新与跳转，特别是在执行 SPA 开发时，更是几乎必不可少的工具。希望本文能够帮助读者学会如何使用 browser-sync-spa，在日常开发中提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb49b5cbfe1ea061259f