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}"
}
]
}
随便打个断点,启动断点调试,成功