VScode下安装Live-Server的流程及vue devtools问题

  • 由于Chrome下载的vue js devtools插件无法正常识别vue的网站会出现报错;
  • 原因是:在vue本地开发devtools不识别,需要在服务器环境下才能运行;
  • 可以选择live-server进行服务器环境搭建
  1. 在vscode下安装live-server

    1.jpg
  1. 设置live-server配置项

    2.jpg
  1. 在第一个settings.json中更改设置

    3.jpg
  1. 更改配置代码

    "liveServer.settings.host": "127.0.0.1",
    
      "liveServer.settings.root": "/",
      "liveServer.settings.ChromeDebuggingAttachment": true,
      "liveServer.settings.port": 8080,
      "liveServer.settings.NoBrowser": true
    
  1. vscode中右击html页面运行live-server,启用环境

  2. 重启VScode和Chrome浏览器,查看vue js devtools 是否可以工作

你可能感兴趣的:(VScode下安装Live-Server的流程及vue devtools问题)