vite实际应用中常出现的问题

在使用 Vite 进行开发时，虽然它以其高性能和出色的开发者体验著称，但在实际应用中仍会遇到一些常见问题。以下是一些典型问题及其解决方法：

1. 依赖未正确解析

• 问题表现：模块导入失败、报错 Cannot find module 或 Failed to resolve import
• 原因：Vite 默认不支持某些文件类型或第三方库的自动解析
• 解决方法：
  • 确保安装了正确的插件（如 @vitejs/plugin-react, @vitejs/plugin-vue2 等）
  • 使用 optimizeDeps.include 预构建未被正确处理的依赖
  • 检查 vite.config.js 中是否配置了正确的 resolve.extensions

2. 生产构建后静态资源路径错误

• 问题表现：部署后图片、字体等资源加载失败
• 原因：未正确配置 base 或使用了绝对路径
• 解决方法：
  • 根据部署环境设置 base 字段（相对路径用 ./，CDN 用 URL）
  • 使用 new URL('@/assets/image.png', import.meta.url).href 动态引入资源

3. 热更新（HMR）失效