Electron 使用 vue router 開啟視窗方法

最近做 Electron + Vue 時踩到一個很蠢但很真實的坑。我原本以為 BrowserWindow 開新視窗、loadURL 指到對的路由就好了，結果畫面一直不對，最後才發現問題不是 Electron 壞掉，而是我漏了最基本的 router-view。

這類問題常見原因

Electron 搭配 vue-router 時，開新視窗常見有幾種錯法：

1. router 還在用 history mode，正式環境 file path 對不到。
2. loadURL 沒有帶到正確 hash 路徑。
3. 根元件根本沒有 router-view。
4. 新視窗和主視窗載入的是同一個入口，但 route 沒切成功。

我這次就是第 3 種，浪費了不少時間。

比較穩的做法

1. vue-router 改用 hash mode

Electron 正式環境大多是用本機 file:// 去載入打包後的檔案，這時 hash mode 通常比 history mode 省事很多。因為 route 會落在 # 後面，不用靠伺服器重寫路由。

2. BrowserWindow 要帶正確 URL

我當時的寫法是這樣：

1
2
3
4
5

const pageUrl = import.meta.env.MODE === 'development' && import.meta.env.VITE_DEV_SERVER_URL !== undefined
    ? import.meta.env.VITE_DEV_SERVER_URL + `#/${hash || ''}${urlParam}`
    : new URL(`../renderer/dist/index.html#/${hash || ''}${urlParam}`, 'file://' + __dirname).toString();

notifyWindow.loadURL(pageUrl);

這段重點是：

1. 開發環境走 Vite dev server。
2. 正式環境走打包後的 index.html。
3. 路由透過 # 帶進去。

3. App 畫面一定要有 router-view

很多教學只講怎麼切 route，卻沒提醒你最基本的承載點。如果根元件沒有：

1

<router-view></router-view>

那 route 就算切成功，也沒有地方能把對應畫面渲染出來。

我這次問題最後就是這個，真的很蠢，但也很容易忽略。

我後來的理解

Electron 開新視窗時，很多人會太專注在 BrowserWindow 設定，結果忘了前端本身還是 Vue SPA。只要是 SPA，本質上還是要滿足：

1. 路由模式正確。
2. URL 能對應到正確畫面。
3. 畫面有地方 render route component。

缺一個都可能看起來像 Electron 問題。

參考

vue electron 创建子窗口后内容和父窗口一样 配置vue-router无效？ - SegmentFault 思否

修改成 router · malagege/vue-electron-Pomodoro@5786989 · GitHub