Nuxt 3（Vite打包）静态站点跳转首页时图片未完全加载问题

以下是针对你遇到的「路由跳转至首页时图片不加载、刷新后正常」问题的几种排查和解决思路：

1. 检查图片资源引用路径 #

静态站点中，路由跳转和页面刷新时的路径解析逻辑可能存在差异。如果首页图片用了相对路径（比如./images/banner.jpg），很可能在路由跳转时解析出错。

• 建议将图片放在public目录下，使用根路径引用，例如：<img src="/images/banner.jpg" />
• 如果图片放在assets目录，使用Nuxt的路径别名：<img :src="~/assets/images/banner.jpg" />

2. 确保首页被正确预渲染 #

静态站点生成时，如果首页未被完整预渲染，可能导致跳转时图片资源未被正确注入。检查nuxt.config.ts的预渲染配置：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/'], // 强制预渲染首页
      crawlLinks: true // 自动抓取页面内的链接资源
    }
  }
})

重新执行npm run generate生成静态文件后测试。

3. 排查懒加载逻辑冲突 #

如果首页图片使用了懒加载（包括原生loading="lazy"或第三方库），路由跳转时可能未触发懒加载的初始化流程：

• 临时去掉loading="lazy"属性测试，确认是否是懒加载导致
• 若必须使用懒加载，在首页组件的onMounted钩子中手动触发图片加载：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  document.querySelectorAll('img[data-src]').forEach(img => {
    img.src = img.dataset.src
  })
})
</script>

4. 调整Vite静态资源构建配置 #

Vite的资源哈希或目录配置不当，可能导致跳转时读取到缓存的无效资源。在nuxt.config.ts中添加：

export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: 'assets/[name].[hash][extname]' // 给静态资源添加哈希后缀
        }
      }
    }
  }
})

这样可以避免浏览器缓存旧的图片资源。

5. 确认页面数据获取逻辑 #

如果图片链接是通过异步请求获取的，确保路由跳转时数据被正确重新获取：

• 使用useFetch时，设置唯一key并开启immediate：

<script setup>
const { data: homeData } = useFetch('/api/home', {
  key: 'home-page-data',
  immediate: true
})
</script>

避免因缓存导致跳转时未更新图片链接。

内容的提问来源于stack exchange，提问作者serah mridula