alias导入模型看不见

根据您描述的问题，使用 Vite 配置图片别名时遇到模型文件无法显示的情况，结合权威信息源，解决方案如下：

一、正确配置 Vite 图片别名

配置路径格式

在 vite.config.js 中设置别名时，路径需以 / 开头且为字符串，例如：

resolve: {

alias: {

'/images': 'src/assets/images'

}

}

这样在组件中引用时使用 import image from '/images/model.png'； 即可。


避免使用 path.resolve

配置时路径必须为字符串，不能使用 path.resolve 方法动态生成路径，否则可能导致解析失败。

二、封装动态路径引用函数

若不想在配置文件中硬编码路径，可封装一个函数动态生成图片路径：

// 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;

}

在组件中使用时：

import image from '@/utils/getSrc("model")';

此方法通过 globEager 预加载图片模块，支持动态路径。

三、检查常见问题

路径拼写错误

确保别名路径与实际文件路径完全一致，包括大小写和扩展名。

组件引用方式

使用别名时需以 / 开头，例如 import model from '/images/model.png'；，而非相对路径 import model from './assets/images/model.png'；。

缓存问题

若修改了 vite.config.js，需重启 Vite 开发服务器以应用新配置。

通过上面方法，应能解决使用别名导入模型文件不显示的问题。若问题持续，建议检查文件权限或服务器配置是否影响资源加载。