折腾了好久，我终于找到了解决办法。

既然vite有alias，那我在想，是否可以设置alias的图片路径，这样我在引用图片的时候，就不用写那么长的路径了。结果是不行的，用常规设置组件alias的办法来设置图片的alias，会导致图片不显示。后来终于找到了解决办法。

方法一：配置alias

//app.vue

<img src="/images/logo.png" alt="" />
复制代码

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    base: './',
    plugins: [vue()],
    resolve: {
        alias: {
             '/images': 'src/assets/images',
        },
    },
})

复制代码

图片的alias要用“/”开头，并且路径只能用字符串，不能用path.resolve

方法二：封装函数

如果不在vite.config.js里面使用alias的话，也可以封装一个函数来引用图片。

//utils.js

const getSrc = (name) => {
    if (typeof name === 'undefined') return 'error.png'
    const path = `/src/assets/images/${name}.png`
    const modules = import.meta.globEager('/src/assets/images/*')
    return modules[path]?.default
}
复制代码

//app.vue

<img :src="getSrc('about')" alt="" />
复制代码

import.meta.globEager('/src/assets/images/*')会动态获取到/src/assets/images下的所有图片（不包括子文件夹），并且把图片的路径作为key值变成一个modules。这时传入图片的文件名modules[path].default，就把图片的路径动态映射出来。

注意传入的是字符串，我因为忘了是字符串，查错找了一阵子。