在 VScode 编辑器中调试 Vue 开发

最新推荐文章于 2024-09-10 09:18:12 发布

Chrolly

最新推荐文章于 2024-09-10 09:18:12 发布

阅读量861

点赞数

分类专栏：前端 JS

原文链接：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

版权

前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

一、安装 VScode 插件

Debugger for Chrome
Debugger for Firefox

二、确定Vue CLI的版本号

2.1 在项目文件package.json中查看Vue CLI的版本号
在这里插入图片描述
2.1.1 使用的是 Vue CLI 2，设置并更新 config/index.js 内的 devtool property：

devtool: 'source-map',

2.1.2 使用的是 Vue CLI 3，请设置并更新 vue.config.js 内的 devtool property：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

三、配置调试环境

打开 VScode 编辑器，点击那个齿轮图标来配置一个 launch.json 的文件, 可以直接复制。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

四、其他

参考链接：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html