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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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;。【这个过程就是加载、验…