前端logo替换开发

资源准备资源准备 (Assets)操作 将西电 Logo 图片 xidian_logo.png 放置于项目的静态资源目录下。路径 vue/src/assets/xidian_logo.png目的 确保物理文件存在供前端代码引用。业务组件修改 (Component)路径 vue/src/layouts/main/components/HeaderBar.vue逻辑修改2.1 导入图片 使用 import 语句将图片资源引入为变量。javascript import xidianLogo from ‘swanlab-vue/assets/xidian_logo.png’javascriptimportxidianLogofromswanlab-vue/assets/xidian_logo.png2.2 渲染图片 将模板中的 标签由原本的静态路径改为动态绑定 (:src)并更新 alt 属性以符合学校标识。htmldivclassflex items-center gap-1.5 hover:cursor-pointerclick$router.push(/)img:srcxidianLogoalt西电标志classh-9 hover:opacity-80 transition-opacity//div以上步骤完成后出现了如下图片错误构建配置修复 (Vite Configuration)遇到问题 页面报错 [plugin:vite:import-analysis] Failed to resolve import “…”。排查过程原因 A 缺少路径别名映射。原本项目中只配置了 swanlab-vue而代码引用中可能混用了 /assets/…。原因 B (关键) 在 vite.config.js 的 alias 对象中由于缺少逗号 (,) 导致语法解析错误使得 Vite 无法识别路径别名。解决方案 在 vite.config.js 中补全了 别名的配置确保其指向正确的 vue/src 目录。修正了配置文件中的语法细节逗号。alias:{swanlab-vue:path.resolve(__dirname,vue/src),:path.resolve(__dirname,vue/src)// 补全映射并确保逗号正确}