遇到的問題

在electron-vite提供的開發服務器中，electron能正常顯示頁面中的路由並能正常跳轉.
而在build打包後，雙擊運行electron應用，路由失效，顯示空白頁面

排查BUG

閲讀了腳手架為我生成的主函數代碼：

  // HMR for renderer base on electron-vite cli.
  // Load the remote URL for development or the local html file for production.
  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
  }

可以發現，開發模式下是通過本地鏈接直接顯示vite開發服務器的頁面
而非開發環境則是直接加載本地html頁面

接下來我們再看我的react路由部分代碼:

<BrowserRouter>
    <React.StrictMode>
        <App />
    </React.StrictMode>
</BrowserRouter>

可以發現我們使用了BrowserRouter模式的路由

推測原因

我認為在electron中，只是使用了瀏覽器來直接顯示html頁面，而沒有正確處理路由BrowserRouter模式

驗證

使用vite build打包html頁面，不用electron顯示，而是在nginx中測試
在nginx中發現能正常路由

解決方法

改用HashRouter模式路由，完美解決。

<HashRouter>
    <React.StrictMode>
        <App />
    </React.StrictMode>
</HashRouter>