通过vscode调试基于vite和vue3的typescript项目

项目说明

• 基于vite作为本地开发和打包服务
• 是vue3的typescript项目
• 使用了element-plus这类ui组件库
• 使用了unplugin-vue-components，unplugin-vue-components实现组件的按需引入和自动引入

launch.json

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      // 使用微软的edge浏览器
      "type": "msedge",
      "request": "launch",
      "name": "针对 localhost 启动 Edge",
      // vite的dev地址
      "url": "https://localhost:5173",
      // 指定你的源代码目录
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      // 这里需要设置为true
      "sourceMaps": true,
      // 跳过node_modules
      "skipFiles": ["node_modules/**"]
    }
  ]
}

vite.confg.ts

export default defineConfig((env) => {
    return {
        plugins:[
            AutoImport({
              // 这个必须设置为true，否则，断点位置可能不正确
              dts: true,
              resolvers: [elementPlusResolver],
              imports: ['vue', 'vue-router', 'pinia'],
            }),
            Components({
                // 这个必须设置为true，否则，断点位置可能不正确
                dts: true,
                resolvers: [elementPlusResolver],
            }),
        ],
        build: {
          // 必须设置为true，否则vscode的断点位置会不正确
          sourcemap: true,
        },
    }
})

启动

先启动服务

pnpm run dev

再通过vscode启动浏览器访客模式来进行调试

此时会自动打开浏览器（且处于访客模式），并自动进入首页

vscode会出现调试工具条，添加的断点，在断点没进入的时候，是这种灰色小圆圈

注意：必须先打断点，再刷新浏览器，才能进入断点，已经进入断点，再在中途加入新断点，是无法进入新断点的