Vite+React构建后Assets资源不显示问题求助

问题根源 #

开发模式下Vite允许直接访问src目录，但生产构建时src目录不会被打包到dist中，你直接写src/assets/Deal-2.webp这种绝对路径，生产环境自然找不到资源，导致404。

具体修复步骤 #

• 修正图片引用方式
  别直接写固定路径，用Vite支持的资源导入方式：

  <script setup>
  // 用@指代src目录（需要vite.config配置别名）
  import deal2Image from '@/assets/Deal-2.webp'
  </script>
  
  <template>
    <div class="onah">
      <img :src="deal2Image" alt="优惠活动2" />
    </div>
  </template>
  

  如果不想用import，也可以用相对路径（根据你的组件文件位置调整），比如组件在src/views/Home.vue，路径就写../assets/Deal-2.webp。

• 确认vite.config配置
  确保src目录的别名和打包配置正确，示例配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import path from 'path'
  
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      // 配置@指向src，方便路径引用
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    build: {
      // 生产构建后资源会放到dist/assets下，默认就是这个值，不用改
      assetsDir: 'assets'
    }
  })
  

• 重新构建验证
  执行npm run build，然后查看dist/assets目录，应该能看到带哈希后缀的图片文件；打开dist/index.html检查img标签的src是否指向正确的资源路径，最后用本地服务（比如serve dist）测试是否能正常显示图片。

内容的提问来源于stack exchange，提问作者Anthony Onah