React仓库部署至Netlify后页面空白的问题求助

1. 修正webpack的publicPath配置 #

打开项目根目录的webpack.config.js，找到output配置块，确保publicPath设置为根路径：

output: {
  path: path.join(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: '/'
}

如果之前是相对路径（比如./），部署后资源会找不到，直接导致页面空白。

2. 添加Netlify重写规则 #

在项目根目录新建_redirects文件，写入以下内容：

/*    /index.html   200

这条规则会让所有访问请求都指向index.html，适配React单页应用的路由机制，避免刷新或直接访问子路由时出现空白。

3. 确认Netlify构建设置 #

核对你的构建设置：

• 构建命令：使用npm run build（项目package.json里的build命令已关联webpack生产打包）
• 发布目录：设置为dist（webpack打包产物默认输出到该文件夹）

4. 清除缓存重新部署 #

在Netlify控制台的部署页面，点击「Trigger deploy」选择「Clear cache and deploy site」，避免旧配置缓存影响部署结果。

内容的提问来源于stack exchange，提问作者Jnr Leo