前端logo替换开发

2301_780669862026-03-28 21:32

资源准备

资源准备 (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'

javascript 复制代码

javascript import xidianLogo from '@swanlab-vue/assets/xidian_logo.png'

2.2 渲染图片：将模板中的标签由原本的静态路径改为动态绑定 (:src)，并更新 alt 属性以符合学校标识。

html 复制代码

html <div class="flex items-center gap-1.5 hover:cursor-pointer" @click="$router.push('/')"> <img :src="xidianLogo" alt="西电标志" class="h-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 目录。

修正了配置文件中的语法细节（逗号）。

javascript 复制代码

alias: {
  '@swanlab-vue': path.resolve(__dirname, 'vue/src'),
  '@': path.resolve(__dirname, 'vue/src') // 补全映射并确保逗号正确
}