排查 vite 资源路径错误，核心是检查代码中引用资源的写法以及构建后的输出目录配置。如果使用的是相对路径，需确保其相对于当前文件位置正确；如果是绝对路径，则必须使用 /@assets/ 或 @vite/client 等 vite 内部别名，并配合正确的 base 配置。若资源在开发环境正常但生产构建后 404，通常是因为 base 未设置为与部署路径一致的值，导致静态资源 url 生成错误。
相对路径引用为何找不到文件
当你在 JavaScript 或 CSS 中使用相对路径（如 ./logo.png）时，Vite 会将其解析为相对于源文件的绝对路径。如果文件层级较深或路径拼写有误，就会报 404。解决方法是确认文件实际位置，并使用正确的相对路径表示法，例如从 src/components/Header.js 引用同级图片应写为 ./logo.png，引用上一级目录则用 ../logo.png。
import logo from './assets/logo.png'; console.log(logo); // 输出哈希后的完整 URL
上述代码中，logo 变量会被 Vite 替换为构建后的资源 URL。如果路径写错，Vite 会在控制台报错并提示找不到模块。确保路径字符串准确无误是解决此类问题的第一步。
生产环境构建后资源 404 怎么解决
生产环境出现 404 往往是因为部署路径与 Vite 默认生成的路径不匹配。Vite 默认 base 为 '/'，这意味着它假设应用部署在域名根目录下。如果你的应用部署在子目录（如 /app/），则需要将 base 修改为 '/app/'，这样所有资源链接都会自动加上前缀。
// vite.config.js
export default {
base: '/my-app/',
build: {
outDir: 'dist'
}
}
修改 vite.config.js 中的 base 选项后，重新运行 npm run build，生成的 HTML 和 JS 文件中的资源路径将包含 /my-app/ 前缀，从而匹配服务器上的实际目录结构。
动态导入资源时路径拼接错误怎么办
在使用模板字符串动态构建资源路径时，Vite 无法在编译期确定具体文件，因此不会进行哈希处理，可能导致路径失效。此时应使用 import.meta.glob 来预加载可能的资源，或者确保动态部分不包含路径结构，仅作为文件名后缀。例如，避免使用 import(`./assets/${name}.png`) 这种形式，而是通过映射表或固定命名规则来引用已知资源。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
