Solution to the white screen after electron-builder packaging exe

The project uses An Electron application with Vue3 and TypeScript.

Debug runs the project without any problem, and the page can be displayed. However, there is an error on the browser console:

Unable to load preload script：preload/

Unable to load preload script After translation: The preload script cannot be loaded.

There is a problem with the load path pointed to. Finally, change it to output out file:

__dirname: The path to the program exe running

 
  // HMR for renderer base on electron-vite cli.
  // Load the remote URL for development or the local html file for production.
  if ( && ['ELECTRON_RENDERER_URL']) {
    ("__dirname=====>"+__dirname);
    mainWindow!.();
 
    (['ELECTRON_RENDERER_URL'])
  } else {
    //(join(__dirname, '/renderer/'))
    (join(__dirname,'../../out/renderer/'));
  }

The above is the detailed solution to the white screen after electron-builder packaging exe. For more information about electron-builder packaging exe, please follow my other related articles!