Vite中public目录静态资源加载失败问题排查

核心原因 #

Vite在开发模式（npm run dev）和生产构建（npm run build）下对public目录资源的路径解析逻辑存在差异：

• 生产构建时，public下的资源会被完整复制到dist根目录，不带根路径前缀的assets/img/coins/BNB.svg能正常匹配到对应文件
• 开发模式下，Vite将public目录直接映射为服务器的根路径，如果路径不带/前缀，会被解析为当前页面URL的相对路径（比如页面在/user路由下，请求路径会变成/user/assets/img/coins/BNB.svg），自然找不到目标文件导致404

解决步骤 #

• 修改路径前缀：所有public下的静态资源引用，必须以/开头，将assets/img/coins/BNB.svg改为/assets/img/coins/BNB.svg
• 正确的组件绑定示例：

<template>
  <img :src="coinIcon" alt="Coin Icon" />
</template>

<script setup>
// 注意路径开头的斜杠
const coinIcon = '/assets/img/coins/BNB.svg'
</script>

• 规避错误用法：不要用@或~这类指向src目录的别名引用public资源，这类别名不会映射到public目录
• 确认publicDir配置：保持vite.config.js中publicDir: 'public'（默认值，可省略配置），不要修改为其他路径

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