Vite构建后静态资源路径404问题求助

方案1：通过批量导入让Vite识别并打包图标 #

Vite无法识别动态拼接的资源路径，导致构建时不会打包这类图标。可以用import.meta.glob提前批量导入所有图标文件，让Vite自动处理打包：

1. 修改图标路径数组和获取函数：

// 批量导入所有颜色的图标，匹配规则可根据实际文件名调整
const iconModules = import.meta.glob('../assets/icons/WSD-Website-Feature-Icon-Market-Trends-*.svg', { eager: true, import: 'default' });

const getImageUrl = (baseName, color = "white") => {
  const fullName = `${baseName}${color}.svg`;
  return iconModules[fullName];
};

// 数组仅保留基础名称部分
const imagePaths = [
  `../assets/icons/WSD-Website-Feature-Icon-Market-Trends-`,
  `../assets/icons/WSD-Website-Feature-Icon-Market-Trends-`,
];

2. 调用方式保持不变：

:src="getImageUrl(imagePaths[index],'red')"

构建时Vite会把所有匹配的SVG文件打包到dist/assets目录，自动处理好路径映射。

方案2：将图标放到/public目录并调整路径 #

若把图标移至public/icons目录，需修改路径写法——/public下的资源会原封不动复制到dist根目录，访问时用绝对路径：

1. 修改路径数组：

const imagePaths = [
  `icons/WSD-Website-Feature-Icon-Market-Trends-`,
  `icons/WSD-Website-Feature-Icon-Market-Trends-`,
];

2. 修改获取函数：

const getImageUrl = (path, color = "white") => {
  // public下的资源以根路径开头
  return `/${path}${color}.svg`;
};

构建后icons目录会完整出现在dist根目录，路径访问正常。

方案3：配置Vite手动复制指定目录到dist #

如果不想修改业务代码，可在vite.config.js中添加自定义插件，手动把assets/icons复制到dist：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { copyFileSync, mkdirSync, existsSync, readdirSync } from 'fs';
import path from 'path';

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'copy-icons',
      buildEnd() {
        const srcDir = path.resolve(__dirname, 'src/assets/icons');
        const destDir = path.resolve(__dirname, 'dist/assets/icons');
        if (!existsSync(destDir)) mkdirSync(destDir, { recursive: true });
        readdirSync(srcDir).forEach(file => {
          copyFileSync(path.join(srcDir, file), path.join(destDir, file));
        });
      }
    }
  ]
});

此方式不如前两种优雅，优先推荐方案1或2。

内容的提问来源于stack exchange，提问作者H B