摘要：Vue+Vite項目使用Electron打包時出現ERR_CONNECTION_REFUSED錯誤，原因是未正確引用構建后的靜態資源。關鍵解決步驟：1）運行npm run build生成dist目錄；2）修改Electron配置引用dist內的資源；3）確保build過程中修復所有報錯。注意構建后的資源路徑與開發環境不同，需特別調整index.html等入口文件的引用路徑。

解決用electron打包Vue工程(Vite)報錯electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
Background: 生產環境通過 Electron 直接加載本地文件系統中的靜態資源

注：node后的狀態碼不重要
明明前端工程可以運行，后端連接也沒問題，為什么打包完成后總是連不上網址？
網上常規的排錯思路：
? 目標服務未運行
? 端口號配置錯誤
? 防火墻/安全組攔截
? 跨域策略限制
于是你耗費精力一步步來，到頭發現還是沒有頁面，連接錯誤
可是你忽略了一個必要的前提：
生產環境引用的是經過 Vite 構建、壓縮、哈希命名后的文件
構建后的靜態資源（如.html）包含指向編譯后 JavaScript 文件的引用
你想起來在打包過程中或多或少的修改或新增了一些文件，使之看似符合應有的結構
但即便自己寫的代碼和網上build后的長相完全一致，打包后也無法被正確引用，因為不是編譯過的代碼
那如何預先編譯一遍所有必要的組件呢？答案很簡單，使用npm命令編譯一遍：
1.
Terminal: npm run build # 實際執行的是package.json里的scripts.build
2.

"name": "DXY 1st",
    "version": "5.3.0",
    "private": true,
    "description": "DXY 666",
    "author": "duandashuaige",
 
 
"scripts": {
 
  "build": "vite build"  //在你package.json中增加scripts參數
 
}

3.打包后會得到根目錄下的dist文件夾，dist文件夾里的內容才是打包后機器可以直接引用的文件，里面有：
Assets文件夾，用來存放靜態資源（js/CSS/img）
index.html，關鍵的入口文件，記得把路徑改成引用dist里的資源
……

注意事項：build過程中對源文件已有的報錯比較嚴格，如果沒有修好某些小報錯，build會失敗：

修好小bug之后就可以美美build咯：