vscode 使用http协议打开页面,错误 1.先在vscode上安装 Debugger for Chromem  2.配置文件 3.安装全局的本地服务器, 4.启动服务器 5.常见问题

vscode 使用http协议打开页面,错误

vscode 使用http协议打开页面,错误

vscode 使用http协议打开页面,错误

vscode 使用http协议打开页面,错误

vscode 使用http协议打开页面,错误
1.先在vscode上安装 Debugger for Chromem 
2.配置文件
3.安装全局的本地服务器,
4.启动服务器
5.常见问题

2.配置文件

vscode 使用http协议打开页面,错误
1.先在vscode上安装 Debugger for Chromem 
2.配置文件
3.安装全局的本地服务器,
4.启动服务器
5.常见问题

3.安装全局的本地服务器,

  • 打开调试控制器 ctrl+shift+y,输入live-server看是否安装了 本地服务器
  • 打开终端,安装的目录不需要管,这里是全局安装,npm install -g live-server 
  • vscode 使用http协议打开页面,错误
1.先在vscode上安装 Debugger for Chromem 
2.配置文件
3.安装全局的本地服务器,
4.启动服务器
5.常见问题
  • 显示楼上的页面表示安装成功

4.启动服务器

  • 再终端栏目输入 live-server启动本地服务器,就会调用系统的浏览器启动
  • 如果想启动其他目录的文件通过cd切换到响应目录,之后再live-server启动服务器即可
  • vscode 使用http协议打开页面,错误
1.先在vscode上安装 Debugger for Chromem 
2.配置文件
3.安装全局的本地服务器,
4.启动服务器
5.常见问题

    vscode 使用http协议打开页面,错误
1.先在vscode上安装 Debugger for Chromem 
2.配置文件
3.安装全局的本地服务器,
4.启动服务器
5.常见问题

5.常见问题

  • 这里需要注意的是你的页面中的文件路径必须正确,这个问题我犯了个打错后来冷静下来发现,我还是太菜l

    1.for example html中的路径   :vscode 使用http协议打开页面,错误
1.先在vscode上安装 Debugger for Chromem 
2.配置文件
3.安装全局的本地服务器,
4.启动服务器
5.常见问题

           2.文件实际路径:         vscode 使用http协议打开页面,错误
1.先在vscode上安装 Debugger for Chromem 
2.配置文件
3.安装全局的本地服务器,
4.启动服务器
5.常见问题

          3.live-server启动路径:vueLenverpractical> live-server ,这一请求发现css无法加载,于是乎,查看请求地址:Request URL:http://127.0.0.1:8080/assets/lib/bootstrap/css/bootstrap.min.css

          4.修改错误: 服务器启动地址:vueLenver> live-server ,地址栏输入http://127.0.0.1:8080/practical/,找得到相应的文件即可,再次查看css请求地址:

                1)Request URL:http://127.0.0.1:8080/practical/bootstrap.%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%A7%BB%E5%8A%A8%E

                2)我是真的菜,一个小错误,肆老金