问题
在项目引入图片资源的时候，如果在配置文件中配置了 alias ，发现启动后图片无法正常显示。。。就很无语
原因
归根到底还是图片引入的路径处理有误。折腾了好久，终于找到了两种解决方法，在此做了下记录，有遇到同样的问题的小伙伴可以尝试通过以下方法解决。
解决
alias 配置使用字符串的形式
举个简单的例子，我们在 vue 文件引入图片
<img src="/images/logo.png" alt="" />
那么在 vite 的配置文件 vite.config.js 可以这样配置
// 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 的键必须是以 / 开头，值必须要是字符串
自定义函数引入图片
如果不想使用 alias 配置处理图片路径的话，可以自己手动封装一个函数，方法很简单，参考如下
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;
};
import.meta.globEager('/src/assets/images/*') 这个方法很牛逼，可以动态获取到 /src/assets/images 下的所有图片（不包括子文件夹），把图片的路径文件名作为模块的 key，那么就可以通过文件路径获取对应的模块图片了。
然后在 vue 文件下就可以这样引入了。
<img :src="getSrc('about')" alt="" />
当然第二种方法缺点还是很明显，遇到多种图片类型的时候就比较麻烦，还需要优化一下，第一种方法使用起来很舒服，赶紧用起来吧！！
