前端开发，部署页面到服务器，并实现页面“热部署”

版权声明：LT https://blog.csdn.net/LitongZero/article/details/82315945

在开发前端项目的时候，我们经常需要，把页面放到服务器中的“容器”中。

比如VueJS，在开发VueJS时，我们要把页面放到“服务器”中，以便我们对程序的调试。

经常需要自启服务器。这样非常麻烦，不光繁琐，而且降低了开发效率。

介于此，我们可以使用browser-sync(浏览器同步测试工具)开发模块，来帮助我们实现启动服务器，并对项目中的html、css、js文件进行监听，每当这些文件改动，便刷新浏览器。

这样不光解决了服务器中运行的不便，更提高了开发效率。

---

0、初始化项目

npm init -y

1、安装browser-sync

npm i --save-dev browser-sync

#注意，这里是--save-dev，因为其只是开发工具

3、配置browser-sync

打开项目中的package.json，在其中的scripts项中添加字段如下。

"dev":"browser-sync start --server --files \"*.html, css/*.css ,js/*.js\"",

4、启动服务器

npm run dev

启动后，会自动打开首页

此时，每次修改项目中的html\css\js文件后，浏览器都会自动刷新。并展示新的效果。

5、备注

browser-sync的参数可以修改，比如，端口号、默认打开浏览器等等…

详情可查看

官方说明文档 或 中文说明文档