解決用electron打包Vue工程(Vite)報錯electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED

Background: 生產環境通過 Electron 直接加載本地文件系統中的靜態資源

注：node後的狀態碼不重要

明明前端工程可以運行，後端連接也沒問題，為什麼打包完成後總是連不上網址？

網上常規的排錯思路：

目標服務未運行
端口號配置錯誤
防火牆/安全組攔截
跨域策略限制

於是你耗費精力一步步來，到頭髮現還是沒有頁面，連接錯誤

可是你忽略了一個必要的前提：

生產環境引用的是經過 Vite 構建、壓縮、哈希命名後的文件

構建後的靜態資源（如.html）包含指向編譯後 JavaScript 文件的引用

你想起來在打包過程中或多或少的修改或新增了一些文件，使之看似符合應有的結構

但即便自己寫的代碼和網上build後的長相完全一致，打包後也無法被正確引用，因為不是編譯過的代碼，electron讀不懂

那如何預先編譯一遍所有必要的組件呢？答案很簡單，使用npm命令編譯一遍：

1.

終端: 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咯：