feature request: support transform alias

[Simon-He95]

Description

In background-image: path in url(), the resource will not be parsed correctly

Suggested 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

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[s3xysteak]

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>

[s3xysteak]

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.