如何在vscode中调试vue-cli项目?
一:参考官网文档,写的还是很清楚的: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项目?的更多相关文章
- linux系统下如何在vscode中调试C++代码
本篇博客以一个简单的hello world程序,介绍在vscode中调试C++代码的配置过程. 1. 安装编译器 vscode是一个轻量的代码编辑器,并不具备代码编译功能,代码编译需要交给编译器完成. ...
- 如何在vscode中调试python scrapy爬虫
本文环境为 Win10 64bit+VS Code+Python3.6,步骤简单罗列下,此方法可以不用单独建一个Py入口来调用命令行 安装Python,从官网下载,过程略,这里主要注意将python目 ...
- 如何在vscode中编写.net core 项目(vscode)
1.下载拓展 .NET Core Extension Pack (作者:保哥) 这个里面将需要的插件都打包了小白一键下载就好了 2.下载扩展 vscode-solution-explorer ...
- vscode下面开发vue.js项目
vscode下面开发vue.js项目 https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- 如何在C#中调试LINQ查询
原文:How to Debug LINQ queries in C# 作者:Michael Shpilt 译文:如何在C#中调试LINQ查询 译者:Lamond Lu 在C#中我最喜欢的特性就是LIN ...
- go环境搭建及vscode中调试
1.下载go安装包一般国内用户无法在官网下载,可以自行百度找一些共享的资源墙内下载地址: http://www.golangtc.com/downloadCSDN上资源下载(一般需要积分):http: ...
- 如何在vscode里面调试js和node.js
一般大家调试都是在浏览器端调试js的,不过有些时候也想和后台一样在代码工具里面调试js或者node.js,下面介绍下怎样在vscode里面走断点. 1,用来调试js 一:在左侧扩展中搜索Debugge ...
- 转:vscode中调试php
转:http://blog.csdn.net/x356982611/article/details/52664334 简介 PHP是动态语言没有调试器的话排错起来很是麻烦.vscode可以说是程序员的 ...
随机推荐
- 简易的CRM系统案例之SpringMVC+JSP+MySQL+myBatis框架版本
主要对上一版DAO框架的替换hibernate变成myBatis 简易的CRM系统案例之SpringMVC+JSP+MySQL+hibernate框架版本 src/mybatis.xml <?x ...
- zblog文件大小超出,上传成功但插入不了
在zblogphp时,经常会遇到需要上传2m以上的文件或图片,这个时候就需要修改默认上传文件的大小了.看了很多地方的文章都解决不了,后面在麒麟杰博客找到相关解决办法. 工具/原料 zblogp ...
- react起步——从零开始编写react项目
# index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- Egret入门学习日记 --- 第十七篇(书中 7.4~8.2节 内容)
第十七篇(书中 7.4~8.2节 内容) 昨天看到 7.3 节,那么今天. 开始 7.4节. 好吧,这些其他的服务器运行知识,就不搞了... 至此,7.4节 内容结束. 开始 7.5节 内容. ...
- php 生成32位随机字符串 用于支付验证 用户注册
//32位随机字符串 function randstrpay($length=32) { $rand=''; $randstr= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ01234567 ...
- csu 1901: 赏赐 OR 灾难
1901: 赏赐 OR 灾难 Submit Page Summary Time Limit: 1 Sec Memory Limit: 128 Mb Submitted: 86 ...
- esigner中name和comment互換
1 PowerDesigner中批量根据对象的name生成comment的脚本 执行方法:Open PDM -- Tools -- Execute Commands -- Run Script Opt ...
- Linux基础重点习题讲解
第一章 一个EXT4的文件分区,当时使用touch test.file命令创建一个新文件时报错,报错的信息是提示磁盘已满,但是采用df-h命令查看磁盘大小时,只使用了60%的磁盘空间,为什么会出现这 ...
- iOS开发支付篇——内购(IAP)详解
1 <em>内购所需要的资料整理总结,史上最完整的,哈哈哈哈哈哈</em> 思维导图 重点总结: 1 2 3 4 5 6 7 8 9 10 11 12 13 1.获取内购列表( ...
- 多文件上传,添加重复文件时无法触发onchange事件。
<input type="file" id="upload" @change="getFile($event)" multiple=& ...