vs code debugging vite+vue3 project breakpoints cannot point to source code

[qinfeng0214]

Describe the bug

Hello everyone, I want to use vs code to debug my vite+vue3 project. I configured the launch.json file and added the debugger, then started vs code debugging mode, but it stopped at the compiled debugger. I expect it to stop at the debugger of the source code. What should I do? Thank you

Reproduction

null

Steps to reproduce

launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome", // 调试器运行环境
      "request": "launch",
      "name": "debug chrome",
      // "url": "http://abc.console.new.cloud.com:4101",
      "url": "http://127.0.0.1:4101",
      "webRoot": "${workspaceFolder}", // 项目根目录
      "userDataDir": false, // chrome 保存的用户数据目录
      "sourceMapPathOverrides": {
        // "http://abc.console.new.cloud.com:4101/*": "${webRoot}/*"
      }
    }
  ]
}

vite.config.js

import { fileURLToPath, URL } from 'node:url';
import path from 'path';
import fs from 'fs';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import viteCompression from 'vite-plugin-compression';
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
import viteImagemin from 'vite-plugin-imagemin';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { visualizer } from 'rollup-plugin-visualizer';
import qiankun from 'vite-plugin-qiankun';
import { KingDesignResolver } from '@ksconsole/kingdesignresolver';
import Components from 'unplugin-vue-components/vite';

// Automatically include styles from ElementPlus components
const optimizeDepsElementPlusInclude = ['element-plus/es'];
fs.readdirSync('node_modules/element-plus/es/components').forEach((dirname) => {
  const stylePath = `node_modules/element-plus/es/components/${dirname}/style/css`;
  if (fs.existsSync(stylePath)) {
    optimizeDepsElementPlusInclude.push(stylePath);
  }
});
const pastName = 'ksc-system-manage';
// Define base Vite configuration
export default defineConfig(({ mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd() + '/env');
  const isAnalyze = mode === 'analyze';
  return {
    base: env.VITE_BASE_URL || '/',
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        mockjs: fileURLToPath(new URL('./virtuals/mock.js', import.meta.url)),
      },
    },
    server: {
      port: 4100,
      // host: 'abc.console.new.cloud.com',
      // origin: 'http://abc.console.new.cloud.com:4100',
      host: '127.0.0.1',
      hmr: true,
      strictPort: false,
      open: true,
      proxy: {
        '/api': {
          target: 'http://xxxxxxx',
          changeOrigin: true,
          secure: false,
        }
        },
      },
    },
    css: {
      preprocessorOptions: {
        less: {
          math: 'always',
        },
      },
    },
    optimizeDeps: {
      include: optimizeDepsElementPlusInclude,
    },
    plugins: [
      vue(),
      Components({
        resolvers: [KingDesignResolver()],
      }),
      vueJsx(),
      vueSetupExtend(),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/svg')],
        symbolId: 'icon-[dir]-[name]',
      }),
      qiankun(pastName, { useDevMode: true }),
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip',
        ext: '.gz',
        deleteOriginFile: false,
      }),
      viteImagemin(),
      ...(isAnalyze ? [visualizer()] : []),
    ],
    build: {
      outDir: 'dist',
      assetsDir: 'assets',
      sourcemap: false,
      minify: 'terser',
    },
  };
});

System Info

system:macOS
browsers: Google Chrome

Used Package Manager

pnpm

Logs

<anonymous> ([127.0.0.1](http://127.0.0.1/)꞉4101/src/views/Organization/workplace/application/index.vue?t=1725331386688:240)
callWithErrorHandling (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:195)
callWithAsyncErrorHandling (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:202)
job (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1955)
callWithErrorHandling (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:195)
flushJobs (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:410)
Promise.then (未知源:0)
queueFlush (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:319)
queuePostFlushCb (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:339)
queueEffectWithSuspense (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1761)
scheduler (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1972)
resetScheduling (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+reactivity@3.4.27/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:263)
triggerEffects (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+reactivity@3.4.27/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:307)
triggerRefValue (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+reactivity@3.4.27/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:1069)
set value (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/@vue+reactivity@3.4.27/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:1114)
finalizeNavigation (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/vue-router@4.3.2_vue@3.4.27/node_modules/vue-router/dist/vue-router.mjs:3400)
<anonymous> (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/vue-router@4.3.2_vue@3.4.27/node_modules/vue-router/dist/vue-router.mjs:3265)
Promise.then (未知源:0)
pushWithRedirect (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/vue-router@4.3.2_vue@3.4.27/node_modules/vue-router/dist/vue-router.mjs:3232)
push (/Users/yft/work/ksc-system-manage/node_modules/.pnpm/vue-router@4.3.2_vue@3.4.27/node_modules/vue-router/dist/vue-router.mjs:3157)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[btea]

You can directly start the debug terminal, then start the project normally, the code should stop at your breakpoint.

[qinfeng0214]

You can directly start the debug terminal, then start the project normally, the code should stop at your breakpoint.

Thanks, it's not a vite issue, maybe it's a dependency issue