Electron+Vite+React生产环境出现404 Not Found错误求助

开发模式下Electron运行正常，但生产环境打包后出现报错：

Unexpected Application Error! 404 Not Found in Production

提供的代码文件 #

electron/main/Main.js

import { app, BrowserWindow, shell, ipcMain, Menu } from 'electron'
import { release } from 'node:os'
import { join } from 'node:path'
import { update } from './update'

const isDev = process.env.NODE_ENV !== 'production';
process.env.DIST_ELECTRON = join(__dirname, '../')
process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
process.env.PUBLIC = process.env.VITE_DEV_SERVER_URL
  ? join(process.env.DIST_ELECTRON, '../public')
  : process.env.DIST

// Disable GPU Acceleration for Windows 7
if (release().startsWith('6.1')) app.disableHardwareAcceleration()

// Set application name for Windows 10+ notifications
if (process.platform === 'win32') app.setAppUserModelId(app.getName())

if (!app.requestSingleInstanceLock()) {
  app.quit()
  process.exit(0)
}

// Remove electron security warnings
// This warning only shows in development mode
// Read more on https://www.electronjs.org/docs/latest/tutorial/security
// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

let win: BrowserWindow | null = null
// Here, you can also use other preload
const preload = join(__dirname, '../preload/index.js')
const url = process.env.VITE_DEV_SERVER_URL;
const indexHtml = join(process.env.DIST, 'index.html')
//const indexHtml = join(__dirname, '../../index.html')

async function createWindow() {
  win = new BrowserWindow({
    title: 'Dispute Resolution',
    icon: join(process.env.PUBLIC, 'light.png'),
    webPreferences: {
      preload,
      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
      // Consider using contextBridge.exposeInMainWorld
      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
      nodeIntegration: true,
      contextIsolation: false,
      //devTools: false // This will disable dev tools
    },
  })

  Menu.setApplicationMenu(null);

  if(isDev){
   // win.webContents.openDevTools;
    //win.webContents.closeDevTools
  }

 if (url) { // electron-vite-vue#298
    win.loadURL(url)
    // Open devTool if the app is not packaged
    win.webContents.openDevTools()
    
  } else {
    win.loadFile(indexHtml);
    win.webContents.openDevTools()
  }

  // Test actively push message to the Electron-Renderer
  /*win.webContents.on('did-finish-load', () => {
    win?.webContents.send('main-process-message', new Date().toLocaleString())
  })*/

  // Make all links open with the browser, not with the application
  win.webContents.setWindowOpenHandler(({ url }) => {
    if (url.startsWith('https:')) shell.openExternal(url)
    return { action: 'deny' }
  })

  // Apply electron-updater
  update(win)
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  win = null
  if (process.platform !== 'darwin') app.quit()
})

app.on('second-instance', () => {
  if (win) {
    // Focus on the main window if the user tried to open another
    if (win.isMinimized()) win.restore()
    win.focus()
  }
})

app.on('activate', () => {
  const allWindows = BrowserWindow.getAllWindows()
  if (allWindows.length) {
    allWindows[0].focus()
  } else {
    createWindow()
  }
})

// New window example arg: new windows url
ipcMain.handle('open-win', (_, arg) => {
  const childWindow = new BrowserWindow({
    webPreferences: {
      preload,
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  if (process.env.VITE_DEV_SERVER_URL) {
    childWindow.loadURL(`${url}#${arg}`)
  } else {
    childWindow.loadFile(indexHtml, { hash: arg })
  }
})

App.jsx

import './App.css';
import Login from './components/Login/Login';
import Register from './components/Register/Register';
import Otp from './components/Otp/otp';
// Private Routes
import Sidebar from './components/Sidebar/Sidebar';
import Dashboard from './components/Dashboard Section/Dashboard';
import ForgotPassword from './components/ForgotPassword/ForgotPassword';
import PasswordUpdate from './components/PasswordUpdate/PasswordUpdate';
import Profile from './components/Profile/Profile';
import RaiseDispute from './components/Raise Dispute/RaiseDispute'
import DisputeListing from './components/Dispute Listing/DisputeListing'
import Transactions from './components/Transactions Listing/Transactions';




import {
  createBrowserRouter,
  RouterProvider
} from 'react-router-dom';

//Create router

const router = createBrowserRouter([
  {
    path: '/',
    element: <div><Login /></div>
},
{
  path: '/Register',
  element: <div><Register /></div>
},
{
  path: '/Otp',
  element: <div><Otp /></div>
},
{

  path: '/Dashboard',
  element: <div className='container'><Dashboard/></div>
},
{

  path: '/raise-dispute',
  element: <div className='container'><RaiseDispute/></div>
},
{

  path: '/disputes-listing',
  element: <div className='container'><DisputeListing/></div>
},
{

  path: '/transactions-listing',
  element: <div className='container'><Transactions/></div>
}
])


function App() {
  

  return (
   
      <div>
        <RouterProvider router = {router} />
        
      </div>
    
  )
}

export default App

解决方案 #

1. 切换React Router为哈希模式

生产环境下Electron加载本地静态文件时，HTML5 history模式会导致路由跳转时找不到对应资源。将createBrowserRouter替换为createHashRouter：

修改App.jsx中的路由创建部分：

import {
  createHashRouter, // 替换createBrowserRouter
  RouterProvider
} from 'react-router-dom';

//Create router
const router = createHashRouter([
  // 原路由配置保持不变
])

2. 验证Electron的文件加载路径

在Main.js的生产环境分支添加日志，确认indexHtml的实际路径是否正确（打包前测试用）：

} else {
  console.log('DIST路径:', process.env.DIST);
  console.log('indexHtml路径:', indexHtml);
  win.loadFile(indexHtml);
}

确保打包后的dist目录中存在index.html，且路径计算无误。

3. 配置Vite打包为相对路径

在vite.config.js中设置base为相对路径，确保静态资源能正确加载：

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

内容的提问来源于stack exchange，提问作者fagbemi ayodele