Open Simon-He95 opened 10 months ago
I am also paying attention to this feature, which will really improve the DX a lot.
before
<script setup>
import FooBar from '~/assets/foo/bar.png'
import PublicAssets from '~pub/publicAssets.png' // /publicAssets.png
</script>
<template>
<img src="../../../assets/foo/bar.png" >
<img :src="FooBar" >
<img :src="PublicAssets" >
</template>
after
<template>
<img src="~/assets/foo/bar.png" >
<img src="~pub/publicAssets.png" >
</template>
Refer to the mini repro https://stackblitz.com/edit/vitejs-vite-wokm83?file=src%2FApp.vue
Actually it has support alias now. <img src="@/assets/vite.svg" >
could work in the mini repro.
However, <img src="~/assets/vite.svg" >
could not work and will throw error. I made a plugin to log the code transformed and found that:
src="@/assets/vite.svg"
will be transformed to import _imports_0 from '@/assets/vite.svg'
src="~/assets/vite.svg"
will be transformed to import _imports_0 from 'assets/vite.svg'
. Because @vue/compiler-sfc removed ~/
in the template while compiling.
Is there anything we can do in vite-plugin? Actually, I think this might be an issue with @vue/compiler-sfc, as it causes compilation differences just due to different alias names.
Description
In background-image: path in
url()
, the resource will not be parsed correctlySuggested solution
When compiling a file, automatically convert the alias path of
alias
into the corresponding target path.Alternative
No response
Additional context
No response
Validations