Nuxt中Assets/Public目录SVG修改不生效问题求助

问题原因 #

开发环境中Vite或Nuxt的静态资源缓存机制会缓存已加载的SVG文件，导致修改后无法即时更新，旧版本仍被组件加载。

解决方法 #

1. 配置Vite禁用SVG缓存与哈希命名

在nuxt.config.ts中添加Vite相关配置，强制监听SVG变化并禁用开发环境的哈希命名：

export default defineNuxtConfig({
  icon: {
    customCollections: [
      {
        prefix: 'my-icons',
        dir: '~assets/my-icons'
      }
    ]
  },
  vite: {
    server: {
      watch: {
        // 监听所有SVG文件的变化
        include: ['**/*.svg']
      }
    },
    build: {
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            // 开发环境下SVG文件不添加哈希后缀
            if (process.env.NODE_ENV === 'development' && assetInfo.name?.endsWith('.svg')) {
              return 'assets/[name].svg';
            }
            // 生产环境保留哈希以优化缓存
            return 'assets/[name]-[hash][extname]';
          }
        }
      }
    }
  }
})

2. 让Nuxt主动监听SVG目录

在nuxt.config.ts中添加watch选项，指定监听自定义图标目录，触发热更新：

export default defineNuxtConfig({
  icon: {
    customCollections: [
      {
        prefix: 'my-icons',
        dir: '~assets/my-icons'
      }
    ]
  },
  // 监听SVG目录下所有文件变化
  watch: ['assets/my-icons/**/*.svg']
})

3. 针对Public目录的动态路径处理

如果SVG存放在Public目录，可通过添加时间戳参数绕过浏览器缓存，在组件中动态更新图标路径：

<template>
  <UIcon :name="`my-icons:${iconPath}`" />
</template>

<script setup>
const iconName = 'my-icon';
const iconPath = ref(`${iconName}?${Date.now()}`);

// 监听SVG文件变化，更新时间戳
if (import.meta.hot) {
  import.meta.hot.accept(`/public/my-icons/${iconName}.svg`, () => {
    iconPath.value = `${iconName}?${Date.now()}`;
  });
}
</script>

注意事项 #

• 生产环境建议保留哈希命名，仅在开发阶段禁用，避免影响线上缓存策略。
• 配置后修改SVG文件，只需刷新页面即可生效，无需重命名或重启服务器。

内容的提问来源于stack exchange，提问作者Joseph Wourms