Vue3+Vite项目生产环境动态加载图片缺失报错如何解决？

问题原因 #

Vite 仅会对代码中可静态分析的静态资源做打包处理（包括路径重写、哈希重命名、输出到dist/assets）。你当前的写法是运行时动态拼接图片路径，构建阶段Vite无法识别需要打包的图片资源，不会将对应图片输出到dist目录；同时生产环境打包后import.meta.url的运行时路径与开发环境完全不同，拼接后生成非法URL导致报错。

修复方案 #

方案1：预导入所有目标图片（推荐，支持资源哈希、按需打包） #

1. 先在Vite配置中补全路径别名，方便路径引用：
   修改vite.config.js的resolve.alias配置：

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      // 原有别名保留，新增下面路径别名配置
      { find: '@', replacement: '/src' },
      {
        find: /^~.+/,
        replacement: (val) => {
          return val.replace(/^~/, "");
        },
      },
      {
        find: 'tailwind.config.js',
        replacement: () => './src/css/tailwind.config.js',
      }
    ],
  },
  // 其余原有配置保持不变
})

2. 在调用cover方法的组件顶部，提前用import.meta.glob导入所有新闻封面图：

// 路径必须写静态字符串，Vite构建时可识别，自动打包所有匹配的图片
const allCovers = import.meta.glob('@/images/news/covers/*', { eager: true })

3. 修改cover方法：

cover(post) {
  // post.cover为图片文件名，例如"activity_cover.jpg"
  const imgKey = `/src/images/news/covers/${post.cover}`
  return allCovers[imgKey].default
}

方案2：静态资源托管到public目录（适合无需哈希处理的资源） #

将src/images/news/covers整个文件夹移动到项目根目录的public目录下，Vite构建时会直接将public下的资源原样复制到dist根目录，无需动态解析路径。
修改cover方法直接返回绝对路径即可：

cover(post) {
  return `/news/covers/${post.cover}`
}

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