javascript - Vite @ aliase 不适用于 Vue 图像 src

Question

目标是使用视图显示图像但图像无法加载： 图像无法加载的点

使用开发者控制台时，src 显示为/~/assets/user.png

别名在导入 Vue 组件时有效，但不适用于图像 src。

这是 vite 配置：

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import { join } from 'path'
import Pages from 'vite-plugin-pages'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            '/~': join(__dirname, 'src'),
        },
    },
    plugins: [
        Vue(),
        Pages({
            extensions: ['vue'],
        }),
    ],
    ssgOptions: {
        script: 'async',
        formatting: 'minify',
    },
})

这是 Vue 文件之一：

<template>
    <div class="flex">
        <span class="flex flex-col">
            <span class="font-extralight text-sm">Thursday, 1st July</span>
            <span class="text-2xl">Today</span>
        </span>

        <span class="flex-grow"></span>

        <img
            v-if="props.renderProfile"
            class="circle rounded-full h-8"
            src="/src/assets/user.png"
            alt="Picture belonging to your profile"
        />
    </div>
</template>

<script setup lang="ts">
import { defineProps } from '@vue/runtime-core'

const props = defineProps<{ renderProfile?: boolean }>()
</script>

标签： javascriptvue.jsaliasvite