Open haoqunjiang opened 9 months ago
We also have https://github.com/vuejs/core/pull/9894 which expands the asset url scenarios - anything that might be affected there?
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.
Vue version
3.3.13
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-gqtzmr?file=src%2FApp.vue
Steps to reproduce
npm create vue@latest -- --router
@
in the project with#src
npm run dev
ornpm 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 animport
from the#src/assets/logo.svg
module, therefore can't be resolved.System Info
Any additional comments?
The Use Case
I want to change the default alias to
src/
increate-vue
to#src/
, replacing the current@/
. Because:imports
field inpackage.json
) in all actively maintained versions (https://nodejs.org/docs/latest-v20.x/api/packages.html#subpath-imports)package.json
directly. Considering the Vue.js documentation claimssrc
imports follow the same path resolution rules as webpack module requests, it should be supported in Vue, too.imports
field automatically in 5.4 (https://github.com/microsoft/TypeScript/pull/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#
. https://github.com/vuejs/core/blob/a8d0b1b38b092ec2d10b32bedcee2eea33b77657/packages/compiler-sfc/src/template/transformAssetUrl.ts#L110But now that
#src
is a valid import specifier in Node.js, I think we can't skip such strings blindly. Actually, of all the defaulttransformAssetUrl.tags
, I find that onlyuse[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.