vscode 使用vscode的断点调试来调试vue项目
launch.js文件(没有的话需要vscode断点调试功能创建一个launch.js文件)
点击该三角符号 ,在运行与调试栏中创建该文件
将如下代码覆盖创建的初始launch.js文件代码
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome", //调试的环境
"request": "launch", //调试模式:启动类型
"name": "vue", // 自定义调试名称
"url": "http://localhost:80", //调试的服务地址,需要和devServer对应
"webRoot": "${workspaceFolder}/src", //调试的根路径为src业务目录下
"breakOnLoad": true,
"sourceMapPathOverrides": { //指定生成的sourceMap路径,参考浏览器生成的 .目录和src目录
// "webpack:///src/*": "${webRoot}/*",
// "webpack:///./src/*": "${webRoot}/*"
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
// "webpack:///./src/*": "${webRoot}/*", // 该行代码存在时,会出现vue文件断点定位错位的问题,但可正常使用js文件的断点调试
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
"meteor:///app/*": "${webRoot}/*"
}
},
]
}
vue.config.js文件(只适用于vue-cli 3.x以上版本创建的项目)
configureWebpack: (config) => {
config.devtool = 'source-map';
},
或
configureWebpack:{
devtool:'source-map'
}
babel.config.js
'env': {
'development': {
"sourceMaps": true, // 关键是这两行
"retainLines": true, // 关键是这两行
}
}
配置完成后重启vscode,即可进行vue的断点调试
KS、zheng: 亲测,没用
ERRORERROR__: 非常有用!!很有帮助!!谢谢大神的教学,使我成长很快!我爱你
helloilovejava: 没用,应该是newState.value生效
666遛球球: vue2也可以用这个方法
Chuzhaoyun: ::v-deep .el-upload-list--picture-card .el-upload-list__item { width: 100px; height: 100px; line-height: 100px; }不能设置line-height否则icon会在奇怪的位置