Nuxt 3 搭配 Electron 打包后启动白屏，尝试hashMode仍无效求助

以下几个方向可以排查和解决：

1. 修正Electron主进程的页面加载路径 #

打包后Electron的目录结构会发生变化，主进程加载renderer页面的路径必须匹配实际打包输出位置。打开你的electron/main.ts，确保加载代码类似如下：

import { app, BrowserWindow } from 'electron'
import path from 'path'

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 区分开发/生产环境的页面加载逻辑
  if (app.isPackaged) {
    // 打包后加载本地renderer文件
    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
  } else {
    // 开发环境加载Nuxt dev server
    mainWindow.loadURL('http://localhost:3000')
  }
}

注意../renderer/index.html的路径要和nuxt-electron打包后的输出目录对应，默认情况下nuxt-electron会把renderer产物放在dist-electron/renderer下，主进程路径需正确指向这里。

2. 优化Nuxt路径配置 #

调整你的nuxt.config.ts，确保Nuxt打包产物和Electron的renderer目录对齐：

export default defineNuxtConfig({
  ssr: false,
  router: {
    options: {
      hashMode: true
    }
  },
  app: {
    baseURL: './',
  },
  // 指定Nuxt输出目录为Electron renderer目录
  nitro: {
    outputDir: './dist-electron/renderer'
  },
  electron: {
    build: [
      {
        entry: 'electron/main.ts',
      },
      {
        entry: 'electron/preload.ts',
        onstart(options) {
          options.reload()
        },
      },
    ],
    renderer: {
      // 确保renderer打包路径和Nuxt输出目录一致
      outputDir: './dist-electron/renderer'
    },
  }
})

这样能保证Nuxt打包后的资源都处于Electron可正确读取的相对路径下，避免出现file:///类型的绝对路径错误。

3. 通过开发者工具定位具体报错 #

打包后启动Electron，按F12打开开发者工具，查看控制台和网络标签：

• 若CSS/JS文件出现404，说明路径配置不匹配，调整baseURL或主进程加载路径
• 若为路由相关错误，确认hashMode是否生效：查看页面URL是否带有#前缀（比如file:///xxx/index.html#/）

4. 简化静态资源命名（临时排查） #

Nuxt的静态资源优化有时会导致Electron路径解析异常，可尝试在nuxt.config.ts中添加以下配置简化资源文件名：

export default defineNuxtConfig({
  // ...其他配置
  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: '[name].[ext]',
          chunkFileNames: '[name].[ext]',
          entryFileNames: '[name].[ext]'
        }
      }
    }
  }
})

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