虽然在现代的开发方式中,大家都用webpack,但是有一些老项目,或者特殊项目要求用JQuery等老的开发方式来写。
有的同学为了图方便直接把html文件拖到浏览器里打开
虽然一时方便了,但是由于用file协议和http协议还是有区别的,发生莫名其妙的bug时往往要调好长时间才发现
给大家推荐一个vs code插件,专门应对这种老式开发方式
既可以避免协议不同带来的bug,又可以提高效率
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