vue2升级vue3静态资源不展示

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

Vue2 升级到 Vue3 后，静态资源（图片、TabBar 图标）不显示，通常是因为 Vue3 不再支持 require 动态引入资源，或者资源路径写法和静态资源目录处理方式发生了变化。

根据知识库中的同类案例，可以按以下步骤排查和解决：

1. 排查 require 语法问题（最常见）
Vue2 中常用 require 来动态引入图片，但 Vue3 不支持这种写法。如果你的代码里存在类似 require('@/static/tab_bwd.png') 的用法，需要改为 import 静态导入。

• 错误写法（Vue2）：

  // 在 data 或对象中直接使用 require  
  pictureUrl: require('@/static/tab_icon.png')  

  本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

• 正确写法（Vue3）：

  import tabIcon from '@/static/tab_icon.png'; // 在顶部静态导入  
  export default {  
      data() {  
          return {  
              pictureUrl: tabIcon  
          }  
      }  
  }  

  本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
  参考 Ask 社区的问题：vue2升级到vue3，动态引入资源require如何修改，其中明确说明了此问题的解决方案。

2. 检查静态资源目录和路径
Vue3 项目默认的静态资源目录通常是 static，但编译后资源的访问方式可能有差异。

• 确保图片等资源确实放在项目根目录的 static 文件夹下。
• 在模板或样式中引用静态资源时，使用绝对路径 /static/图片名.png 通常是最稳妥的方式。

  <image src="/static/tab_icon.png"></image>  

  本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

3. 检查 TabBar 配置
如果使用的是 pages.json 中配置的原生 TabBar，请确保其引用的图标路径是有效的，并且图标文件存在于 static 目录下。原生 TabBar 的图标路径不支持 @ 别名，需要直接使用 /static/... 的绝对路径。

// pages.json 示例  
"tabBar": {  
    "list": [{  
        "pagePath": "pages/index/index",  
        "iconPath": "/static/tab_home.png",      // 正确  
        "selectedIconPath": "/static/tab_home_active.png" // 正确  
    }]  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

4. 检查是否有版本兼容性问题
如果以上步骤都检查无误但问题依旧，可以尝试升级 HBuilderX 到最新正式版（目前为 5.07 或更新的 Alpha 版），因为某些版本可能修复了 Vue3 项目下的资源编译问题。

如果问题仍未解决，建议提供一个最小可复现的 Demo，以便进一步定位是框架编译问题还是代码写法问题。