vercel上線資源無法加載

背景:在本地跑開發服務器沒問題,但是部署到 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 中

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/97589.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/97589.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/97589.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Node.js 的模塊化規范是什么?CommonJS 和 ES6 模塊有什么區別?

目錄 一、為什么需要模塊化? 二、Node.js 的模塊化規范 三、CommonJS 模塊化 1. 基本語法 2. 特點 3. 缺點 四、ES6 模塊(ESM) 1. 基本語法 2. 特點 3. 在 Node.js 中的使用 五、CommonJS 和 ES6 模塊的區別 六、實際開發中的選擇…

設計模式:代理模式(Proxy Pattern)

文章目錄一、代理模式的定義二、實例分析三、示例代碼一、代理模式的定義 代理模式是一種結構型設計模式,它為某個對象提供一個代理或占位符,以控制對這個對象的訪問。簡單來說代理對象在客戶端和目標對象之間起到中介作用,客戶端并不會直接操…

數據類型序列化-封裝

/// <summary> /// 定義泛型接口 /// </summary> /// <typeparam name"T">T</typeparam> public interface ISettingValue<T> {/// <summary>/// value/// </summary>T DoubleValue { get; }/// <summary>/// key//…

PitVis-2023挑戰賽:內鏡下垂體瘤手術視頻中的手術流程識別|文獻速遞-深度學習人工智能醫療圖像

Title題目PitVis-2023 challenge: Workflow recognition in videos of endoscopic pituitary surgeryPitVis-2023挑戰賽&#xff1a;內鏡下垂體瘤手術視頻中的手術流程識別01文獻速遞介紹內鏡視覺挑戰賽與PitVis-2023挑戰賽背景及核心內容 “內鏡視覺&#xff08;EndoVis&#…

2025年8月個人工作生活總結

本文為 2025年8月工作生活總結。研發編碼 無處不在的AI 現在很多地方都在推AI&#xff0c;廣西的人工智能走在前列&#xff0c;要賦能各行各業。至于我&#xff0c;主要就是在寫點代碼&#xff0c;寫點交差的文檔。其實現在我已經有點分析哪些代碼哪些文字是AI寫的了。我工作用…

Dubbo常見面試題

1、默認使用的是什么通信框架&#xff0c;還有別的選擇嗎? 默認也推薦使用netty框架&#xff0c;還有mina。 2、服務調用是阻塞的嗎&#xff1f; 默認是阻塞的&#xff0c;可以異步調用&#xff0c;沒有返回值的可以這么做。 3、一般使用什么注冊中心&#xff1f;還有別的…

簡單的加密算法

// 加密函數&#xff08;32位版本&#xff09; //這里的 data 是ID&#xff0c; dword encrypt(dword data, dword key, int shift) {data ^ key; // 第一步&#xff1a;異或混淆// 循環左移&#xff08;shift范圍1-31&#xff09;return (data << sh…

升級的MS9125S USB投屏控制芯片(VGAHD輸出)

MS9125S是一款USB單芯片投屏器&#xff0c;內部集成了USB 2.0控制器和數據收發模塊、視頻DAC、HD接口和音視頻處理模塊&#xff0c;支持壓縮視頻傳輸。MS9125S可以通過USB接口顯示或者擴展PC、智能手機、平板電腦的顯示信息到更大尺寸的顯示設備上&#xff0c;支持VGA和HD視頻接…

求歐拉回路:Hierholzer算法圖解模擬

代碼模板&#xff1a;List<Integer> resultList new ArrayList<>();List<Integer> hierholzer() {dfs(0);resultList.add(0);// 數組反轉Collections.reverse(resultList);return resultList; }void dfs(int start) {for(int end : G[start]) {if(!vis[star…

Kafka面試精講 Day 2:Topic、Partition與Replica機制

【Kafka面試精講 Day 2】Topic、Partition與Replica機制 在“Kafka面試精講”系列的第二天&#xff0c;我們將深入剖析Kafka最核心的三大數據組織機制&#xff1a;Topic&#xff08;主題&#xff09;、Partition&#xff08;分區&#xff09;與Replica&#xff08;副本&#x…

【備戰2025數模國賽】(三)數模常見賽題類型及解決辦法

在進行數學建模競賽時&#xff0c;很多同學面臨的第一個挑戰是如何對賽題進行歸類&#xff0c;并選擇合適的模型。本篇梳理了數學建模中最常見的幾類賽題&#xff0c;并針對每類題型提供了基本的解決思路&#xff0c;幫助大家快速選擇合適的解題方法&#xff0c;高效完成模型構…

LabVIEW測斜設備承壓試驗臺

為保障煤礦井下地質勘探鉆孔中測斜裝備的可靠運行&#xff0c;設計基于 LabVIEW的鉆孔測斜設備承壓性能試驗臺。該試驗臺以氣動增壓泵為壓力執行元件&#xff0c;結合虛擬儀器與 PLC 控制技術&#xff0c;可精準模擬井下壓力環境&#xff0c;完成水壓、疲勞等試驗&#xff0c;實…

四、練習1:Git基礎操作

練習1&#xff1a;Git基礎操作 練習目標 通過實際操作掌握Git的基本命令&#xff0c;包括初始化倉庫、添加文件、提交更改等。 練習步驟 步驟1&#xff1a;環境準備 確保已安裝Git配置用戶信息&#xff08;如果未配置&#xff09; # 檢查Git版本 git --version# 配置用戶信息 g…

RK3399內核驅動實戰:獲取設備號控制LED的四種方法(由淺入深、代碼注釋詳盡)

RK3399 內核驅動實戰&#xff1a;獲取設備號控制 LED 的四種方法&#xff08;由淺入深、代碼注釋詳盡&#xff09; 在 Linux 字符設備驅動開發中&#xff0c;設備號&#xff08;major minor&#xff09;是內核與用戶空間溝通的橋梁。文章圍繞設備號這一條線展開&#xff0c;從…

2025年AI智能體開源技術棧全面解析:從基礎框架到垂直應用

2025年&#xff0c;開源AI智能體技術正以前所未有的速度重塑人工智能領域&#xff0c;從單一任務處理到復雜多智能體協作&#xff0c;開源生態已成為技術創新的核心驅動力。一、開源AI智能體生態概述 1.1 技術演進與發展歷程 AI智能體技術經歷了從規則式智能體&#xff08;2015…

Empire: LupinOne靶場滲透

Empire: LupinOne 來自 <https://www.vulnhub.com/entry/empire-lupinone,750/#top> 1&#xff0c;將兩臺虛擬機網絡連接都改為NAT模式 2&#xff0c;攻擊機上做namp局域網掃描發現靶機 nmap -sn 192.168.23.0/24 那么攻擊機IP為192.168.23.128&#xff0c;靶場IP192.16…

飛騰2000+/64核 PCIE掃描異常問題排查

1、背景介紹近期項目中采用全國產飛騰計算模塊搭配一塊FPGA模塊&#xff08;FPGA為復旦微的VU9P&#xff09;&#xff0c;實現業務數據的收發。FPGA中采用了Xilinx的XDMA IP核&#xff0c;飛騰計算模塊中的FT2000/64核處理器通過PEU1的一路 PCIE3.0x8與VU9P相連接&#xff0c;發…

證明與激勵:Walrus 可編程數據如何通過激勵可用性證明獲得安全性

Walrus 的可用性證明&#xff08;Proof of Availability&#xff0c;PoA&#xff09; 是部署在 Sui 上的鏈上憑證&#xff0c;它為數據托管創建了一個可驗證的公開記錄&#xff0c;并作為存儲服務正式啟動的標志。PoA 中的“激勵”來自一個健全的經濟框架&#xff1a;存儲節點需…

云存儲(參考自騰訊云計算工程師認證)

目錄 存儲基礎知識&#xff1a; RAID&#xff1a; 云存儲概述&#xff1a; 云存儲產品&#xff1a; CBS&#xff1a; CFS文件存儲&#xff1a; COS對象存儲&#xff1a; 云存儲安全&#xff1a; 存儲基礎知識&#xff1a; 機械硬盤&#xff1a;HDD&#xff0c;即傳統硬…

面試tips--JVM(2)--對象創建的過程

一、創建對象的完整過程1. 類加載檢查JVM 遇到 new 指令時&#xff0c;首先去檢查這個類 User 是否已經被加載、解析和初始化過。如果沒有&#xff0c;就先執行 類加載過程&#xff08;加載 .class 文件到方法區/元空間、創建 Class 對象等&#xff09;。【這個過程就是加載、驗…