vscode live-server代理服务

vscode有许多插件,当我用VS开发时,想代理环境上的代码,并调试开发,中间遇到一些问题,记录下来
在blog上很容易找到需要安装live server,启用内置服务器
第一步下载
vscode live-server代理服务_第1张图片
第二步点击右下角的Go Live
vscode live-server代理服务_第2张图片
浏览器打开一个端口为5500的页面,如下图:
vscode live-server代理服务_第3张图片
但是如何登陆和与后台交互呢,我百度后,找到如下配置

{
    "liveServer.settings.host": "localhost", //设置本地服务的地址
    "liveServer.settings.port": 8045,//设置本地服务的端口号
    "liveServer.settings.proxy": {
        "enable": true,
        "baseUri": "/",
        "proxyUri": "http://47.91.15.228:888" //需要代理的地址
    },
}

确实页面跳转OK了,但是页面修改不生效,仅仅是修改了URL而已,很奇怪,不知道怎么弄,就卡在这里了,如果有大佬知道,还请告知!
vscode live-server代理服务_第4张图片
vscode live-server代理服务_第5张图片

上面的方法不行,就换一种嘛,不罗嗦了,直接上
用的vscode + nginx

npm install -g live-server  //全局安装live-server,和上面在应用商店安装的 live server应该不一样

然后在vs里新建一个终端,输入live-server,页面就会跳转,默认打开8080端口,如果8080被占用,会随机生成一个端口,我下面生成的是58345这个端口

live-server --port=45678    //也可以指定“45678”这个端口,如果该端口已被占用,则生成一个新的端口并返回

vscode live-server代理服务_第6张图片
接下来是页面展示:
vscode live-server代理服务_第7张图片
但是还是没有对接后台接口,下面是重要的:
这时候打开nginx的配置文件,我新建了一个8049的端口监听,然后配置服务器地址和vs给出的端口号
vscode live-server代理服务_第8张图片
最后启动nginx,页面改为我新建的端口号就OK了
vscode live-server代理服务_第9张图片
最后输入账号密码,能进去了,可以开心地进行代码的调试了!!
vscode live-server代理服务_第10张图片

最后,感觉这个不是最简便的方法,能不能直接只用vscode设置,而不用到nginx,但是本人测试了好久还是没用,如果有大佬知道,还请不吝赐教,谢谢。
此项目不是vue项目,是angularJS老项目,如果对您有帮助,点个赞吧!

你可能感兴趣的:(vscode,live,server)