VSCode调试Vue.js 3时打开带?t=后缀的重复源文件问题求助

这不是无法避免的行为，主要是Vite开发环境的缓存Bust机制和sourcemap映射配置导致的，以下是几个有效的解决方法：

1. 调整Vite的SourceMap配置 #

在项目根目录的vite.config.js（或vite.config.ts）中修改sourcemap相关配置，确保生成的sourcemap正确关联原始文件，而非带缓存参数的路径：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 开发环境启用正确的sourcemap
  server: {
    sourcemap: true
  },
  optimizeDeps: {
    esbuildOptions: {
      // 确保依赖的sourcemap也正确生成
      sourcemap: true
    }
  }
})

2. 优化VSCode调试配置 #

修改.vscode/launch.json，添加pathMapping和resolveSourceMapLocations等配置，帮助调试器正确解析sourcemap到本地原始文件：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      // 映射Vite的别名到本地路径（如果项目用了@别名）
      "pathMapping": {
        "/@/": "${workspaceFolder}/src"
      },
      // 指定调试器只解析项目内的sourcemap，排除node_modules
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ],
      // 覆盖sourcemap路径映射，确保指向原始文件
      "sourceMapPathOverrides": {
        "file:///*": "${webRoot}/*"
      },
      "skipFiles": [
        "<node_internals>/**/*.js",
        "${workspaceFolder}/node_modules/**/*.js",
        "${workspaceFolder}/**/*.mjs",
        "${workspaceFolder}/**/*.tss"
      ]
    }
  ]
}

3. 清理调试缓存 #

• 关闭VSCode，删除项目根目录下的.vscode/文件夹（注意备份launch.json）后重新打开项目
• 或按Ctrl+Shift+P（Windows/Linux）/Cmd+Shift+P（Mac）执行Developer: Reload Window重载窗口

内容的提问来源于stack exchange，提问作者djeetee