前端開發,部署頁面到伺服器,並實現頁面“熱部署”
阿新 • • 發佈:2018-12-22
在開發前端專案的時候,我們經常需要,把頁面放到
伺服器
中的“容器”中。比如
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
檔案後,瀏覽器都會自動重新整理。並展示新的效果。