雖然在現代的開發(fā)方式中，大家都用webpack，但是有一些老項目，或者特殊項目要求用JQuery等老的開發(fā)方式來寫。
有的同學為了圖方便直接把html文件拖到瀏覽器里打開
雖然一時方便了，但是由于用file協(xié)議和http協(xié)議還是有區(qū)別的，發(fā)生莫名其妙的bug時往往要調好長時間才發(fā)現

給大家推薦一個vs code插件，專門應對這種老式開發(fā)方式
既可以避免協(xié)議不同帶來的bug，又可以提高效率

Live Server

Live Server

使用方法：
在安裝以后，在vs code 左邊的工作區(qū)中，右鍵點擊html文件，會有一個open with live server的選項，點擊就會在瀏覽器中打開了

右鍵

停止live server
在vs code的狀態(tài)欄里有按鈕

點擊停止

點擊后就會停止server

功能：
1.在文件更改時可以實現熱加載
2.html里引入的js、css文件，在更改后也會熱更新
3.可以用手機在局域網訪問
4.支持https（需要設置）
5.支持代理proxy

設置：
在vs code的settings.json里可以對插件進行設置
1.設置啟動的瀏覽器為chrome

"liveServer.settings.CustomBrowser": "chrome",

2.設置代理，這里比較奇怪
先上代碼

"liveServer.settings.proxy": {
    "enable": true, //set it true to enable the feature.
    "baseUri": "/api", //from where you want to proxy.
    "proxyUri": "http://localhost:7001/" //the actual url.
  }

首先設置enable為true，
baseUri意思是以/api開頭的請求會走代理
proxyUri是代理要請求的地址

奇怪的來了
比如你要請求

http://localhost:7001/index

你的ajax應該這么寫

$.ajax({
    type: 'get',
    url: '/api/index'
  })

就是它會去掉baseUri的內容，然后前面在拼上proxyUri的內容
這一點是和webpack-dev-server不一樣的地方

還有其他可以設置，可以參考
https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md