背景:在本地跑开发服务器没问题,但是部署到 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 中