章節連結
在使用 Visual Studio Code ( VS Code ) 內的 Preview on web server 套件時,發現其背後用的套件就是 BrowserSync 。由於 Preview on web server 中沒有辦法自定義 Server 的啟動位置(一律都為資料夾根目錄),所以就用 npm 去下載原生的套件來作開發使用。
步驟
1. 首先使用 npm 工具,全域情況下安裝。
1 |
npm install -g browser-sync |
2. 在專案的根目錄中,執行以下指令:
1 2 3 4 5 |
// 啟動一個 server,監聽其下資料夾中附檔名為 vue 和 css 的檔案 browser-sync start --server --files="./*.vue, ./*.css" // 若你要全部監聽,那可以使用萬用字元即可 browser-sync start --server --files="*" |
3. 預設的開啟 port 是 3000,至於 BrowserSync 的 UI 設定介面是開在 3001。詳細的使用方法,可以上官網查看。