虽然在现代的开发方式中，大家都用webpack，但是有一些老项目，或者特殊项目要求用JQuery等老的开发方式来写。
有的同学为了图方便直接把html文件拖到浏览器里打开
虽然一时方便了，但是由于用file协议和http协议还是有区别的，发生莫名其妙的bug时往往要调好长时间才发现
给大家推荐一个vs code插件，专门应对这种老式开发方式
既可以避免协议不同带来的bug，又可以提高效率
Live Server
Live Server
插件地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
使用方法：
在安装以后，在vs code 左边的工作区中，右键点击html文件，会有一个open with live server的选项，点击就会在浏览器中打开了
右键
停止live server
在vs code的状态栏里有按钮
点击停止
点击后就会停止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
网友评论