首次将仓库部署至Netlify后出现空白页面问题求助

Package Directory 正确填写规则 #

Package Directory是Netlify执行依赖安装、构建命令的工作目录，核心指向你的Vite项目中包含package.json的文件夹：

• 若Vite项目直接放在仓库根目录（根目录下可见package.json、vite.config.js）：留空或填写.即可。
• 若项目位于仓库子文件夹（比如仓库根目录下的frontend/vite-app，package.json在vite-app内）：填写子文件夹的相对路径，例如frontend/vite-app。

额外排查要点（针对Vite部署空白页） #

除了Package Directory，这些配置也会导致空白页和资源加载报错：

• Publish目录：Vite默认构建输出为dist目录，Netlify的Publish directory必须填dist；若你在vite.config.js中修改了build.outDir，则填写修改后的路径。
• Base路径配置：如果网站部署在Netlify的二级路径下（如https://xxx.netlify.app/blog/），需在vite.config.js中设置base: '/blog/'，否则静态资源路径会错误导致404。
• 构建命令：确保Netlify的构建命令与项目包管理工具匹配，比如npm run build（npm）、pnpm run build（pnpm）或yarn build（yarn），该命令会自动在Package Directory指定的目录中执行。

快速验证方法 #

1. 确认仓库中package.json的位置，Package Directory必须指向该文件夹。
2. 查看Netlify部署日志，若出现"找不到package.json"类报错，直接修正Package Directory路径。
3. 检查开发者工具的网络请求，若存在大量404资源，优先排查Base路径和Publish目录配置。

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