Alias setting not working on the audio tag

[jimmylee850328]

I'm so confused why alias of "@" only work on <img> tag

// They're in the same .vue file
// It works
<img
    id="image"
    width="50"
    height="50"
    src="@/assets/images/colorbar.png"
    :style="image_style"
    referrerpolicy="no-referrer"
>
        
// but... It doesn't works
<audio
    ref="coin_sound"
    src="@/assets/sounds/coin.mp3"
    referrerpolicy="no-referrer"
/>

// btw it works
<audio
    ref="coin_sound"
    src="src/assets/sounds/coin.mp3"
    referrerpolicy="no-referrer"
/>

and the error is:

I'm sure I have these files

This is my vite.config.js

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
    base: "./",
    server: {
        port: 5566,
        open: true
    },
    plugins: [
        vue(), 
        vueJsx(), 
        vuetify({ autoImport: true })
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
});

[yun77op]

audio resource are not transformed into esm imports as img resources.

the source code lies in https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/template/transformAssetUrl.ts#L40

we can override this behaviro by config template.transformAssetUrls for vue plugin

plugins: [
  vue({
    template: {
      transformAssetUrls: {
        video: ['src', 'poster'],
        source: ['src'],
        img: ['src'],
        image: ['xlink:href', 'href'],
        use: ['xlink:href', 'href'],
        audio: ['src'] // newly added
      }
    }
  })
]