Quasar Electron 打包后白屏怎么解决？

白屏问题大概率是路径没整对。Electron 打包后 __dirname 的指向跟开发时不一样，直接用 loadURL 配 file 协议容易踩坑。

最直接的解决办法是在 electron-main.js 里判断一下是否打包：

const { app, BrowserWindow } = require('electron')

const path = require('path')



function createWindow () {

  const mainWindow = new BrowserWindow({

    width: 900,

    height: 600

  })



  // 打包后用 loadFile，开发环境用 loadURL

  if (process.env.NODE_ENV === 'production') {

    mainWindow.loadFile(path.join(__dirname, 'dist/electron/index.html'))

  } else {

    mainWindow.loadURL(process.env.APP_URL)

  }

}



app.whenReady().then(createWindow)

如果上面这个还是不行，那问题可能在 router 的 base 配置。打开 src/router/index.js，检查一下 base 选项：

const routes = [

  {

    path: '/',

    component: () => import('layouts/MainLayout.vue'),

    children: [

      { path: '', component: () => import('pages/Index.vue') }

    ]

  }

]



const router = new VueRouter({

  mode: 'history', // 或者 'hash'

  base: process.env.VUE_ROUTER_BASE || '/',  // 关键是这个

  routes

})

打包后如果用了 history 模式，base 改成 / 就好，别整那些花里胡哨的路径前缀。

还有一点，检查 quasar.conf.js 里的 build 区块有没有漏掉 electron 的 target 配置：

build: {

  electron: {

    inspectPort: 5858,

    bundler: 'packager' // 或者 'builder'

  }

}

如果以上都确认没问题，可以试着在 mainWindow 创建时加上 webPreferences 调试一下，看能不能拿到更多信息：

const mainWindow = new BrowserWindow({

  width: 900,

  height: 600,

  webPreferences: {

    nodeIntegration: false,

    contextIsolation: true,

    devTools: true  // 打开开发者工具看控制台

  }

})

打开 devTools 之后，看看控制台具体报什么错，比在这猜要靠谱得多。

别折腾 base 配置了，直接把 Vue Router 模式改成 hash。Electron 用 file:// 协议加载时，history 模式因为找不到服务器回退路径必白屏。

// quasar.conf.js

build: {

  vueRouterMode: 'hash', // 强制改成 hash

}