请教 vue3 调试

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 464 天前的主题，其中的信息可能已经有所发展或是发生改变。

（ 1 ）创建项目： npm create vite@latest vue3_vite_js -- --template vue

（ 2 ）修改 vite.config.js

export default defineConfig({
  build: {
    sourcemap: false,
    minify: false
  },
  ......
})

（ 3 ）新增 launch.json

{
	"version": "0.2.0",
	"configurations": [
		{
			"type": "chrome",
			"request": "launch",
			"name": "Launch Chrome against localhost",
			"url": "http://localhost:5173",
			"sourceMaps": true,
			"webRoot": "${workspaceFolder}"
		}
	]
}

（ 4 ） npm run dev 然后下个断点，：

（ 5 ）启动 launch.json 的调试，结果断点断到了 localhost:5173\src\main.js 而不是源文件：

是哪个步骤出问题了，希望大佬不吝赐教（项目文件在： https://github.com/wjx0912/frontend_debug/tree/main/vue3_vite_js ）

9 条回复

vue666

2023-08-25 10:38:15 +08:00

你要调试代码, 只需要拉这个仓库 https://github.com/vuejs/core, 跑 dev, package/vue/example 就可以调试了, 改源码也会实时更新

wjx0912

2023-08-25 11:02:17 +08:00

@vue666 感谢回复。但是这是集成到 vue 源码里面的，我是想调试一个单独的项目。另外想知道上面的步骤到底是哪里出问题了。。。

wish8023

2023-08-25 14:13:32 +08:00

推荐直接在 playground 里面调试，方便直观。

wjx0912

2023-08-25 15:07:43 +08:00

@wish8023 感谢回复。这只是 demo 。实际工程比较大没法传到 playground

wednesdayco

2023-08-25 16:54:02 +08:00

前端项目谁在 vscode 里调试啊，一般都是在浏览器里吧- -

AuYuHui

2023-08-25 17:21:00 +08:00

你要调试 vue? 还是调试项目？

wjx0912

2023-08-25 17:57:26 +08:00

调试项目。用 vscode 要方便一点吧。另外也不想到处加 debugger ，加了还得删，git 提交也很麻烦

Belmode

2023-08-25 18:08:52 +08:00

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

wjx0912

2023-08-25 18:28:02 +08:00

@Belmode 大哥。你这个是 webpack 的。我项目里面用的 vite