在Netlify部署React Vite项目后出现空白页面

核心原因 #

Netlify部署时未加载Vite构建后的dist产物目录，反而尝试读取项目根目录下的src源码文件，而Netlify对.jsx文件返回的MIME类型为application/octet-stream，不符合浏览器加载ES模块的要求，导致加载失败页面空白。

具体解决方案 #

• 修正Netlify部署目录配置

  1. 登录Netlify后台，进入你的项目页面
  2. 点击顶部Site settings，找到Build & deploy板块下的Build settings
  3. 在Publish directory输入框中填写dist，同时确保Build command设置为npm run build（根据你使用的包管理器调整，比如yarn build或pnpm build）
  4. 保存配置

• 检查Vite配置文件的base路径
  打开项目根目录的vite.config.js，确认base配置匹配你的部署路径：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/' // 如果部署在子路径，比如https://xxx.netlify.app/blog/，则改为'/blog/'
  })
  

  修改后本地重新执行npm run build生成新的dist目录

• 重新触发Netlify部署
  回到Netlify项目的Deploys页面，点击Trigger deploy → Deploy site，让平台重新构建并部署正确的dist目录内容

• （可选）修正_headers文件位置
  如果你之前添加了_headers文件，确保它放在dist目录下（而非项目根目录），Netlify只会读取部署目录下的配置文件。正常情况下Netlify会自动处理静态资源的MIME类型，这一步仅作为补充排查。

内容的提问来源于stack exchange，提问作者Aydin Gani