Vite.js+React.js项目yarn build后构建产物空白页问题求助

以下是几种常见的原因和对应的解决方法：

• 基础路径配置错误
  Vite默认的base配置为/，适用于部署在服务器根目录的场景。如果是直接在本地打开打包后的index.html，需要修改vite.config.js中的base配置为相对路径：

export default defineConfig({
  base: './',
  // 其他原有配置
})

修改后重新执行yarn build，再尝试打开index.html。

• React Router路由模式不兼容
  如果项目使用了React Router的BrowserRouter，本地打开静态文件时，由于没有服务器支持路由重写规则，会导致路由无法匹配从而页面空白。将路由模式改为HashRouter即可解决：

// 替换原有路由导入
import { HashRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <HashRouter>
    <App />
  </HashRouter>
);

• 本地文件打开的浏览器限制
  部分浏览器对本地静态文件的资源加载、跨域存在限制，建议使用本地小型服务器来运行打包后的文件。可以用serve工具快速启动：

# 全局安装serve
yarn global add serve
# 进入build目录启动服务
serve -s build

之后访问终端提示的localhost地址即可正常查看应用。

• 资源加载路径异常
  检查build文件夹内的CSS、JS等资源路径是否为相对路径，如果是绝对路径（例如/assets/main.js），本地打开时会无法找到资源。确保base配置正确后，重新打包即可生成相对路径的资源引用。

内容的提问来源于stack exchange，提问作者Henrique R. Pohl