vscode中的liveserver无作用,怎么设置(vscodelive server)

前端跨域解决 (vscode live server proxy 代理)

这个显然是处理前端跨域最优的方法了,在此记录下来方便以后使用,附送scss 转 css

使用 vscode IDE作为编写工具

1.搜索并加载 vscode 插件 live server

2.要文件根目录创建 ".vscode" 目录

3.在 .vscode 目录下创建settings.json

4.proxUri 为代理的目标地址

5.baseUri 识别代理的符号 (如下例中 baseUri: '/api', 则以"/api"开头的网络请求都将被识别为需要代理转发的地址,并把 ‘/api’重写为空"")

1.ajax请求会受到浏览器同源策略的限制(同源 = 域名 + 端口 都一致)

2.ajax请求默认携带 同源下的所有cookie, 如果不做限制 a 去请求 b 的时候就等于把a所有的cookie 都告诉b。

3.同源下: 张三的网站只能访问张三的内容如鞋子衣服吃饭等等,如果想访问李四的,浏览器就不让你干了。如果充许这么干的话,张三的cookie隐私将直接暴露给李四,李四有可能干一些不怀好意的事情。

4.跨域情况:张三把钱都放在李四那里,现在张三想去李四那边取钱,这时候就需要跨域了。

5.跨域怎么解决呢?接下来把解决问题的思路简单描绘一下。

5.1:李四告诉全世界说我对钱不感兴趣,只要我有,你们所有人都随便来取。因此,当浏览器看到张三要取钱的人是李四这种慈善家,就不再拦着你了。

5.2:李四不是慈善家怎么办?于是张三这个时候就很讨厌浏览器,想了个办法绕过浏览器,然后另外找了个代理去跟李四取钱

5.2.1: 问题是绕过浏览器?怎么绕呢? 于是张三自己建了个服务器,每次要跟李四取钱的时候就欺骗浏览器说我要跟自己的服务器取钱,浏览器这个时候也就不再拦着你了

5.2.2:当张三自己的服务器接收到跟李四取钱任务后,就以proxy代理的身份向李四取钱,取完钱之后再通过浏览器给了张三

5.2.3:vscode 中的live server 插件里面就这个代理向李四取钱的代理服务器功能,本文settings.json 中包含了配置信息

6.当然还有一些很多牛叉的解决跨域的方法。若有兴趣的同学可以一起研究探讨。

vscodeliveserver无法下载

解决措施:采用手动下载,不让服务器下载。进行下载vscode-servlet.tar.gz。

如何实现前端代码打开vscode编辑器

vscode 可安装静态web服务器 Live Server用于运行前端代码,方便调试。最新的 Live Server已支持php动态页面。

安装方法是,点击左侧第五个图标,打开“扩展”页面,在文本框中输入Live Server,点击第一个搜索结果,在右侧页面中点击安装,等待安装完成。

运行方式是,选中项目,点击屏幕下方工具栏中的Go live按钮即可。再点击一次,即停止运行服务器。

Live Server有一些默认配置选项,用户可以修改。点击 文件-首选项-设置, 在右侧页面中找到 Live Server Config,其中列出的是本插件的配置属性。将其复制到右侧,修改属性值,点击保存即可。例如,修改默认的端口,可以复制以下代码到页面的右侧的用户设置中。

1

"liveServer.settings.port": 5501

点击保存,默认的端口就有5500改为5501.

其他设置的含义,查找该插件的说明文档。

注意,VSCode 中的所有设置都是通过json格式的数据配置的。用户可以查找对应的key值,修改其value,从而修改配置属性。

vscode怎么使用live server

步骤:

1.点击左边活动栏最下面的插件按钮

2.在输入框搜索live server插件。(大概输完“live”下面就出现了)

3.安装live server插件

4.此时右下角状态栏会出现“go live”

图解:

像这样子,就可以了:

vs code之Live Server的使用(搭建本地服务器)

可以看到,vs code右下角出现了这样一个小图标(点击即可打开)

如不作任何配置:点击之后默认打开

点击扩展设置,打开settings.json

具体添加的配置如下(最重要的是前两条配置):

整个settings.json配置如下:

更多详细配置见:

361知讯网

本文链接:http://pdidw.com/vs/31696.html

发表评论

评论列表

还没有评论,快来说点什么吧~