如何修改 Vite 配置以显示源码？

Question

vite vue3 无法出现源码，如何修改配置，目前vite.config.ts配置如下

export default defineConfig(({command,mode})=>{
    const env = loadEnv(mode, process.cwd())
    return{
        server: {
            host: '0.0.0.0',
            port: 8000,
            proxy: {
                [env.VITE_APP_BASE_API]: {
                    target: env.VITE_SERVE,
                    changeOrigin: true,
                    rewrite: path => path.replace(env.VITE_APP_BASE_API, '')
                }
            }
        },
    sourcemap: true,
        base: './',
        plugins: [
            vue(),
            VueSetupExtend(),
            AutoImport({
                resolvers: [ElementPlusResolver()]
            }),
            Components({
                resolvers: [ElementPlusResolver()]
            })
        ],
    css: {
      postcss: {
        plugins: [
          require("tailwindcss"),
          require("autoprefixer"),
        ]
      }
    },
        optimizeDeps: {
            include: ['schart.js']

        },
        build: {
            assetsDir: 'static',
        }
    }
})

打断点后发现出现的并非源码，sourcemap勾选是下面这样的（使用vscode打开，vscode的断点也是下面这样的）

不勾选是下面这样的，但仍然是不是源码

vscode lanuch.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": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Answer 1

提供一个我用 vscode 编辑器调试的配置

// .vscode/launch.json
{
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
   }

url 是应用启动后的路径。然后按 F5 启动调试,会在源码中触发断点