如何优雅的调试你的vue项目

Vue 项目的创建有两种方式：

用 @vue/cli 创建的 webpack 作为构建工具的项目
用 create-vue 创建的 vite 作为构建工具的项目

用vue-cli创建

安装 @vue/cli：

javascript 复制代码

yarn global add @vue/cli

执行 vue create vue-demo1 创建 vue 项目：选择 vue3 的模版。等待依赖安装完毕即为成功创建项目。使用npm run serve启动项目在浏览器访问：http://localhost:8080/

开始调试。点击调试窗口的 create a launch.json file 来创建调试配置文件把 Chrome 调试配置的 url 改成目标 url 就可以进行调试了点击 debug 启动，在 vue 组件里打个断点，你会发现断点没生效：我们加个debugger直接在浏览器调试看看刷新一下浏览器你会发现他从一个乱七八糟的路径，映射到了 webpack-internal://.../App.vue?...id=... 的路径下。然后在 VSCode Debugger 里看看这个路径：发现是 /Users/.../src/App.vue?91a0,而且我们本地映射的文件是只读的，不能修改。原因是hash不一致，导致本地找不到对应的正确文件。 vue cli 默认的 devtool 设置是 eval-cheap-module-source-map，每个模块用 eval 包裹，并且通过 sourceURL 指定文件路径，通过 sourceMappingURL 指定 sourcemap。在 Chrome DevTools 里点击下面的 source map from 的 url：这个是被 eval 包裹并指定了 sourceURL 的模块代码，会被 Chrome DevTools 当作文件加到 sources 里。这里有两个 sourceURL，第一个 sourceURL 在 sourceMappingURL 之前，这样 sourcemap 映射到的就是这个 url，也就是被 Chrome DevTools 当作文件的路径。而第二个 sourceURL 在之后，它可以修改当前文件的 url，也就是在调试工具里展示的路径。然后再点击，会跳转回 bundle 的代码：这些被 eval 包裹的就是一个个的模块代码。第一个 sourceURL 的路径是通过 $module$ 指定的，而模块名后默认会带 ?hash：所以想要去掉 hash 就不能用 eval 的方式。所以我们修改下 webpack 的 devtool 配置：

diff 复制代码

const { defineConfig } = require('@vue/cli-service')
	module.exports = defineConfig({
  transpileDependencies: true,
+ configureWebpack(config) {
+ 	config.devtool = 'source-map'
+ }
})

从 eval-cheap-module-source-map 变为 source-map。去掉 eval 是为了避免生成 ?hash 的路径，去掉 cheap 是为了保留列的映射，去掉 module 是因为这里不需要合并 loader 做的转换。然后重启跑一下 dev server，再次调试：这时你会发现之前不生效的断点现在能生效了：这样我们就能在vacode中愉快的调试 vue3 的代码了。如果你创建的是 vue2 项目，可能还要在 launch.json 的调试配置加这样一段映射（只保留这一条）

javascript 复制代码

"sourceMapPathOverrides": {
  "webpack://你的项目名/src/*": "${workspaceFolder}/src/*"
}

知道了 vue cli 创建的 webpack 项目怎么调试，我们再来看下 create vue 创建的 vite 项目：

用vite创建

create vue 是创建 vite 作为构建工具的 vue 项目的工具。直接执行 npm init vue@3 即可：进入项目目录，执行安装，启动开发服务器：浏览器访问，可以看到渲染出的页面：

javascript 复制代码

{
  // 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": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "runtimeExecutable": "canary",
      "runtimeArgs": [
          "--auto-open-devtools-for-tabs"
      ],
      "userDataDir": false,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

随便打个断点，启动断点调试，成功