最近有一個專案開發進入尾聲，因此得面臨應用打包的任務。
簡單介紹這個應用的背景：我透過 Vue3 結合 Electron的方式建立這個應用，打算透過 Vue-Cli 起一個服務，並且透過 Electron 作為載體顯示這個應用。比較特別的是整合了一系列語音提醒的功能，用戶的對應事件會觸發對應的語音提示。
在開發階段其實相當順利，沒有遇到什麼特別的問題，語音也都能順利正常播放，離奇的是當我透過指令：
npm run electron:build離奇的事情就出現，我的音檔沒有播放出聲音。當時第一個映入腦海的錯誤，會不會是因為找不到資源，因為 electron-builder 在打包時得配置對應的參數，要不然在資源載入的時候，就無法順利掛載。
然而問題似乎不是我想得這麼簡單，進入了 Developer Tool Network 檢查，發現Status：200 ，這個資源載入是沒問題的。
因此在Stack Over flow, GitHub issue 開始翻，有人說是Vue跟Electron 解析時需要反向重構資源路徑等，但很遺憾的是都無法順利解決問題。
我又開始回去找官方文檔，結果在Guide 頁面總算讓我找到一絲解題的線索 Guide | Vue CLI Plugin Electron Builder (nklayman.github.io)。
其實audio 與 Videos 是一樣的狀況，但很容易忽略這部分，因為文檔只有提到Video ，估計有音源的需求應用不多？！所以很容易忽略這段文檔內容
另一個小挑戰是其實這個說明不太懂到底要修改哪裡，頃刻間我也摸不著頭緒，後來才想到這指的是 src/background.js 中的配置文檔，只需要修改成如下代碼即可
'use strict'
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
這下總算解決這個令人頭疼的應用打包問題了。