在使用 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) - 使用
- 根据部署环境设置