Vite Dev Server Sourcemap不起作用或指向VSCODE DEBUGGER中的错误行/文件 我使用WSL2和/或Fedora 38与VSCODE以及我转换为VITE的先前CRA项目。自从移至Vite以来，我一直无法让Vscode调试器正确工作...

Question

数量报告堆栈跟踪中的线号不正确（Chrome/ff）。

破裂点根本没有触发（Chrome/ff）。

在启动和vite.config.js中，我一直在WSL2和Fedora 38中尝试无数的选择。我当前的配置：
• launch.json

• {
    // 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": [
      {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "chrome",
        "url": "http://localhost:3000",
        "trace": true,
        "sourceMaps": true,
        "perScriptSourcemaps": "yes",
        "webRoot": "${workspaceFolder}"
      },
      {
        "name": "Firefox Debug",
        "type": "firefox",
        "request": "launch",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}/src",
        "skipFiles": [
          "**/node_modules/**"
        ],
        "pathMappings": [
          {
            "url": "http://localhost:3000",
            "path": "${workspaceFolder}"
          }
        ]
      }
    ]
  }

• vite.config.js

• import { defineConfig, loadEnv } from 'vite';
  import react from '@vitejs/plugin-react';
  import { sentryVitePlugin } from "@sentry/vite-plugin";
  import { VitePWA } from 'vite-plugin-pwa';
  import copy from 'rollup-plugin-copy'
  import path from "path";
  
  //import viteTsconfigPaths from 'vite-tsconfig-paths';
  
  
  export default defineConfig(({ mode }) => {
    //import svgrPlugin from 'vite-plugin-svgr';
    process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '')};
    
    return {
      build: {
        outDir: 'build',
        sourcemap: true
      },
      plugins: [react(), VitePWA({
        injectRegister: null,
        strategies: 'injectManifest',
        filename: 'service-worker.js',
        srcDir: 'src',
        devOptions: {
          enabled: true,
          type: "module",
        },
        injectManifest: {
          maximumFileSizeToCacheInBytes: 20 * 1024 * 1024,
        }
      })],
      resolve: {
        alias: {
          src: path.resolve(__dirname, "./src"),
        },
      },
      preview: {
        port: 3000
      },
  
      server: {
        port: 3000,
        host: "0.0.0.0"
      }
    };
  });

我打开的relevant gh问题：
• https：//github.com/microsoft/vscode-js-debug/issues/1739#issuecomment-1629913799

经过很多痛苦和调查，我发现vScode + Angular＆vite造成麻烦的根本原因是：

vite“优化”（变换）JavaScript将其推向浏览器。并且（当前2/2025）VSCODE无法获取浏览器正在运行的实际代码。因此，Chrome调试器工作正常（具有实际代码），但是Vscode在node_modules/...中对原始源运行sourcemaps，并且通常会被许多行熄灭（因为Vite可能会插入newlines，因为它会在转换代码时）。 

保持VSCODE调试器与源同步的唯一解决方案是还原为WebPack。

非常简单：angular.json项目。$ {myProject} .architect.build.builder：

   "builder": "@angular-devkit/build-angular:browser"
      "options": {
        "main": "src/main.ts",