在前端开发中，经常会遇到需要快速启动本地服务器并查看页面效果的情况。browser-sync-vue 是一个基于 browser-sync 的 npm 包，它可以很方便地启动本地服务器并自动刷新页面。本文将介绍 browser-sync-vue 的使用方法。
安装
使用 npm 进行安装：
npm i browser-sync-vue --save-dev
使用
安装完毕后，在项目根目录下创建一个 bs.config.js 文件，并添加以下内容：
module.exports = {
files: ['./**/**/**/**/*.html', './**/**/**/**/*.css', './**/**/**/**/*.js'],
server: {
baseDir: '.'
},
https: false,
startPath: "/"
};其中，files 属性指定了需要监听的文件，server 属性指定了本地服务器的根目录（一般情况下为项目根目录），https 属性指定了是否启用 https，startPath 属性指定了访问网页时的初始路径。
在 package.json 文件中添加启动命令：
"scripts": {
"start": "browser-sync-vue start"
}现在，可以在终端运行以下命令启动本地服务器：
npm start
示例
以 Vue.js 项目为例，下面介绍如何在 Vue.js 项目中使用 browser-sync-vue。
安装
使用 Vue CLI 创建一个新项目：
vue create my-project
进入项目目录，安装 browser-sync-vue：
cd my-project npm i browser-sync-vue --save-dev
配置
在项目根目录下创建 bs.config.js 文件，并添加以下内容：
module.exports = {
files: ['./src/**/*.{html,css,js}', './public/**/**/**/**/*.{html,css,js}'],
server: {
baseDir: '.'
},
https: false,
startPath: "/"
};其中，files 属性包括了 src 目录和 public 目录下的所有 html、css 和 js 文件，server 属性指定了本地服务器的根目录，https 属性指定了不使用 https，startPath 属性指定了初始路径为根路径。
在 package.json 文件中添加启动命令：
"scripts": {
"start": "browser-sync-vue start"
}运行
在终端运行以下命令启动本地服务器：
npm start
如图所示，browser-sync-vue 启动成功，并自动打开了浏览器：
现在，可以修改项目中的任意 html、css 或 js 文件，并查看修改后的效果。browser-sync-vue 会自动更新浏览器视图，方便快捷。
总结
browser-sync-vue 是一个非常实用的 npm 包，能够轻松启动本地服务器，并自动刷新页面。它的安装使用非常方便，只需要简单几步即可使用。当然，如果需要更全面的配置，可以查看 browser-sync 的官方文档。
希望本篇文章能够对前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde522c