src imports transformation does not support Node.js subpath imports-style URLs

[haoqunjiang]

Vue version

3.3.13

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-gqtzmr?file=src%2FApp.vue

Steps to reproduce

• Create a new project with npm create vue@latest -- --router
• Replace all the presence of @ in the project with #src
• Run either npm run dev or npm run build && npm run preview

What is expected?

The webpage correctly displays the Vue logo in both cases.

What is actually happening?

The <img> src URL stays unchanged as #src/assets/logo.svg, fails to be transformed into an import from the #src/assets/logo.svg module, therefore can't be resolved.

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 275.08 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/Library/Caches/fnm_multishells/1919_1703087524164/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/1919_1703087524164/bin/yarn
    npm: 10.2.0 - ~/Library/Caches/fnm_multishells/1919_1703087524164/bin/npm
    pnpm: 8.12.1 - ~/Library/Caches/fnm_multishells/1919_1703087524164/bin/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 120.0.6099.109
    Chrome Canary: 122.0.6206.0
    Safari: 17.2.1
  npmPackages:
    vue: ^3.3.11 => 3.3.13

Any additional comments?

The Use Case

I want to change the default alias to src/ in create-vue to #src/, replacing the current @/.
Because:

• Node.js supports subpath imports (the imports field in package.json) in all actively maintained versions (https://nodejs.org/docs/latest-v20.x/api/packages.html#subpath-imports)
• Both Vite and webpack can read this field from package.json directly. Considering the Vue.js documentation claims src imports follow the same path resolution rules as webpack module requests, it should be supported in Vue, too.
• TypeScript is going to read from imports field automatically in 5.4 (Add auto-import for the package.json imports field microsoft/TypeScript#55015)

Therefore, using #src could reduce a lot of duplicate configurations in the templates.
The only missing part is Vue's asset URL rewriting.

The Cause

The transformAssetUrl function skips attribute values starting with #.

core/packages/compiler-sfc/src/template/transformAssetUrl.ts

Line 110 in a8d0b1b

attr.value.content[0] === '#' ||

But now that #src is a valid import specifier in Node.js, I think we can't skip such strings blindly.
Actually, of all the default transformAssetUrl.tags, I find that only use[href] could possibly point to a URL fragment.
In all the other tag and attribute combinations, when assigned a #string-style value, it can only be an aliased import path.

[yyx990803]

We also have #9894 which expands the asset url scenarios - anything that might be affected there?

[haoqunjiang]

anything that might be affected there?

Only <iframe> src might be a URI fragment of the current page, therefore ambiguous.

Though, I don't think <iframe> should be included in the PR.