I think that files from Source Maps should be separated from the real files (in particular, the imports), like it is in projects built with Webpack (They are placed under webpack:// namespace).
So, "virtual files" should be displayed under, for example, source-maps:// namespace in DevTools.

Let's looks at the start project's (yarn create @vitejs/app my-vue-app --template vue) Source Maps.

I did only one change that is adding sourcemap: true:

export default defineConfig({
  plugins: [vue()],
  build: {
    sourcemap: true
  }
})

build's mode Source Maps review and one bug

sourceMapsPathChangerPlugin([
    ["../../node_modules/", "node-modules:///"],
    ["../../vite/", "node-modules:///vite/"],
    ["../../", "source-maps:///"],
])

dev's mode Source Maps

In dev mode Source Maps does not look nice. Definitely. Real files are mixed with files from Source Maps.

Especially I don't like that it shows absolute path to components from Source Maps.

Also for each edit of a file a new file (from an import) is created:

16 files (it can be even more — each edit is a new file until you refresh the page)!
While I need only 3: App.vue, HelloWorld.vue and main.js.

Separating of Source Maps from real files/imports are highly required here.
Also it impossible to do it with a plugin, since changing of Source Maps (changing of sources field) possible only in generateBundle hook what does not called in dev mode.

So I expect the separating files from Source Maps to a different namespace or/and an ability to do it manually with a plugin (handle the Source Maps object in dev mode).

By the way, Webpack's ones: