背景:在本地跑開發服務器沒問題,但是部署到 vercel 上就有問題
上一次出現類似問題是在更新游戲引擎方法后本地可以跑但是上線沒有成功,當時是因為 runner.html 是在部署時通過腳本從遠端倉庫拉取的,所以解決方案:1.更新遠端倉庫(但是這個倉庫是由游戲引擎組管理,所以正確做法是溝通)2.但是當時由于需求有點緊急,所以我得先自己模擬實現,那么就去構建腳本中實現添加
但是現在的問題是頁面都無法顯示,然后我去控制臺看到了兩個報錯:1.從CDN拉取資源后COEP;2.mqq第三方庫報錯
那么我的直覺就是 COEP 導致的資源無法加載,但是我明明使用了 useExternalUrl 函數來解決,而且當我去看發現連 DOM樹 構建都受阻了,于是我嘗試先修復問題2
首先是代碼中嘗試直接用 window.mqq上的方法,未作空值處理
其次,第三方平臺模塊作者直接將 mqq.js 放在了 src?文件夾下,導致了在 部署到vercel 上、被 Vite 打包的過程中路徑被hash處理后重寫了,然后我把其放在 public 文件夾下面就解決了顯示的問題
至于 infird.com 的CDN 的COEP問題不只開發環境有,線上 x.qiniu.com 也有,我上報了問題然后等修復再pull一下就好
附:總結了Vite項目中一般放在public中的
- 靜態資源文件:如圖標、圖片、字體、配置等
- 第三方庫/腳本:非ES模塊的第三方庫(mqq.js就不是ES的,所以得放)、CDN替代品、Web Workers
- 直接訪問的文件:下載文件、HTML、JSON數據等
而像那些需要被 JavaScript 模塊系統處理的放在 src 中