Next UI+React+Vite项目构建后空白页问题（Chrome扩展开发）

针对Chrome扩展UI开发（需通过file协议运行）的场景，核心问题确实出在React Router的路由模式适配和Vite构建配置上，以下是具体解决步骤：

1. 切换React Router为Hash模式 #

BrowserRouter依赖HTML5 History API，而file协议没有服务器端路由支持，会导致路由解析失败，页面无法渲染。直接替换为HashRouter即可：

// 替换前
import { BrowserRouter } from 'react-router-dom';

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

// 替换后
import { HashRouter } from 'react-router-dom';

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

2. 调整Vite构建的基础路径 #

确保所有资源用相对路径加载，适配file协议的本地文件结构。在vite.config.js中设置base: './'：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import nextui from '@nextui-org/vite-plugin';

export default defineConfig({
  plugins: [react(), nextui()],
  base: './', // 关键配置，强制使用相对路径
});

3. 确认NextUI全局样式正常加载 #

检查main.jsx中是否正确导入NextUI的全局样式，避免样式缺失导致页面看似空白：

import '@nextui-org/react/dist/style.css';

为什么普通Vite+React项目无此问题？ #

普通项目要么未使用React Router，要么默认采用Hash模式；而NextUI-cli初始化的项目可能默认配置了BrowserRouter，在file协议环境下无法正常工作，这才导致了差异。

内容的提问来源于stack exchange，提问作者rahul Kushwaha