部署React+TailwindCSS+Vite项目至GitHub Pages时遇Rollup依赖解析错误

开发者阿泽

2026-7-19

解决Rollup无法解析framer-motion导入的问题

针对你部署React+TailwindCSS+Vite项目到GitHub Pages时遇到的Rollup解析错误，按以下步骤排查修复：

确认依赖已正确安装
本地项目根目录执行安装命令：
```
npm install framer-motion
# 或使用yarn
yarn add framer-motion
```
安装完成后，提交package-lock.json（或yarn.lock）到GitHub仓库，确保GitHub Actions构建时能拉取到该依赖。
检查导入路径正确性
打开src/components/Services文件，确认framer-motion的导入语句为标准格式：
```
import { motion } from 'framer-motion';
```
避免出现相对路径错误（比如误写为./framer-motion）或拼写错误。
验证本地构建是否正常
先在本地执行构建命令测试：
```
npm run build
```
如果本地构建失败，清理缓存后重试：
```
rm -rf node_modules package-lock.json
npm install
npm run build
```
确保本地构建无问题后再推送代码到仓库。
检查GitHub Actions配置
查看仓库中.github/workflows下的部署脚本，确认构建步骤包含依赖安装环节（比如npm ci或npm install），且执行顺序为：安装依赖 → 执行构建 → 部署到Pages。