一:参考官网文档,写的还是很清楚的:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

二:需要安装的东西和初始项目

2.1  用vue-cli初始化一个vue项目,我这里项目名就叫vue,这里不介绍,不是这个要讲的。问度娘吧。

2.2 用vscode打开这个项目,修改 项目 vue/build/config/index.js 里面的 dev 里面的 devtool: 'cheap-module-eval-source-map' 为 devtool: 'source-map' ,让在编译的时候生成.map文件,能对应找到源码位置。

module.exports = {
dev: { .......... // https://webpack.js.org/configuration/devtool/#development
// devtool: 'cheap-module-eval-source-map', // 原来的 devtool: 'source-map', // 为了能在vscode上面调试改的 ................... }

2.3 安装 Debugger for Chrome 这个插件,直接在vscode的扩展里面去搜,安过的就忽略。

2.4 点击左边的调试的设置,去修改launch.json文件

三:修改launch.json文件:

{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://10.202.2.112:8081",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}

如何在vscode中调试vue-cli项目?的更多相关文章

  1. linux系统下如何在vscode中调试C++代码

    本篇博客以一个简单的hello world程序,介绍在vscode中调试C++代码的配置过程. 1. 安装编译器 vscode是一个轻量的代码编辑器,并不具备代码编译功能,代码编译需要交给编译器完成. ...

  2. 如何在vscode中调试python scrapy爬虫

    本文环境为 Win10 64bit+VS Code+Python3.6,步骤简单罗列下,此方法可以不用单独建一个Py入口来调用命令行 安装Python,从官网下载,过程略,这里主要注意将python目 ...

  3. 如何在vscode中编写.net core 项目(vscode)

    1.下载拓展  .NET Core Extension Pack  (作者:保哥) 这个里面将需要的插件都打包了小白一键下载就好了 2.下载扩展   vscode-solution-explorer ...

  4. vscode下面开发vue.js项目

    vscode下面开发vue.js项目   https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...

  5. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  6. 如何在C#中调试LINQ查询

    原文:How to Debug LINQ queries in C# 作者:Michael Shpilt 译文:如何在C#中调试LINQ查询 译者:Lamond Lu 在C#中我最喜欢的特性就是LIN ...

  7. go环境搭建及vscode中调试

    1.下载go安装包一般国内用户无法在官网下载,可以自行百度找一些共享的资源墙内下载地址: http://www.golangtc.com/downloadCSDN上资源下载(一般需要积分):http: ...

  8. 如何在vscode里面调试js和node.js

    一般大家调试都是在浏览器端调试js的,不过有些时候也想和后台一样在代码工具里面调试js或者node.js,下面介绍下怎样在vscode里面走断点. 1,用来调试js 一:在左侧扩展中搜索Debugge ...

  9. 转:vscode中调试php

    转:http://blog.csdn.net/x356982611/article/details/52664334 简介 PHP是动态语言没有调试器的话排错起来很是麻烦.vscode可以说是程序员的 ...

随机推荐

  1. 简易的CRM系统案例之SpringMVC+JSP+MySQL+myBatis框架版本

    主要对上一版DAO框架的替换hibernate变成myBatis 简易的CRM系统案例之SpringMVC+JSP+MySQL+hibernate框架版本 src/mybatis.xml <?x ...

  2. zblog文件大小超出,上传成功但插入不了

    在zblogphp时,经常会遇到需要上传2m以上的文件或图片,这个时候就需要修改默认上传文件的大小了.看了很多地方的文章都解决不了,后面在麒麟杰博客找到相关解决办法.   工具/原料   zblogp ...

  3. react起步——从零开始编写react项目

    # index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  4. Egret入门学习日记 --- 第十七篇(书中 7.4~8.2节 内容)

    第十七篇(书中 7.4~8.2节 内容) 昨天看到 7.3 节,那么今天. 开始 7.4节.     好吧,这些其他的服务器运行知识,就不搞了... 至此,7.4节 内容结束. 开始 7.5节 内容. ...

  5. php 生成32位随机字符串 用于支付验证 用户注册

    //32位随机字符串 function randstrpay($length=32) { $rand=''; $randstr= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ01234567 ...

  6. csu 1901: 赏赐 OR 灾难

    1901: 赏赐 OR 灾难 Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 86  ...

  7. esigner中name和comment互換

    1 PowerDesigner中批量根据对象的name生成comment的脚本 执行方法:Open PDM -- Tools -- Execute Commands -- Run Script Opt ...

  8. Linux基础重点习题讲解

    第一章  一个EXT4的文件分区,当时使用touch test.file命令创建一个新文件时报错,报错的信息是提示磁盘已满,但是采用df-h命令查看磁盘大小时,只使用了60%的磁盘空间,为什么会出现这 ...

  9. iOS开发支付篇——内购(IAP)详解

    1 <em>内购所需要的资料整理总结,史上最完整的,哈哈哈哈哈哈</em> 思维导图 重点总结: 1 2 3 4 5 6 7 8 9 10 11 12 13 1.获取内购列表( ...

  10. 多文件上传,添加重复文件时无法触发onchange事件。

    <input type="file" id="upload" @change="getFile($event)" multiple=& ...