记一次诡异的bug，The resource was preloaded using link preload but not used within a few seconds

最新推荐文章于 2024-09-10 14:08:00 发布
最新推荐文章于 2024-09-10 14:08:00 发布
阅读量2.1w 收藏 6
点赞数 15
分类专栏： VueJs 常见错误总结 文章标签： vue javascript js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Yolanda_NuoNuo/article/details/113735167
版权
在开发Vue项目时遇到页面加载为空白的问题，错误提示为资源js/index.js被预加载但未在窗口加载事件的几秒内使用。排查后发现是HTML模板中的一行注释导致，注释的内容引用了错误路径的js文件。移除该注释后，问题解决。此问题揭示了HTML body标签注释的潜在影响。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、问题描述

做一个vue项目的时候，突然页面打不开了，空白页，什么都不显示
在这里插入图片描述
报这个错
在这里插入图片描述

The resource http://localhost:8082/js/index.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

二、解决问题

然后我寻思也没有用这个文件呀，后面找呀找呀，发现我在打包的HTML模板里加了一行注释

<!--<body><script type="text/javascript" src="../monitorScreen/js/index.js"></script></body>-->

完整HTML如下

&l
最低0.47元/天 解锁文章
prefetch 和 preload 及 webpack 的相关处理
肖陈伟的博客
05-03 2745
使用预取和预加载是网站性能和用户体验提升的一个很好的途径，本文介绍了使用 prefetch 和 prefetch 进行预取和预加载的方法，并使用 webpack 进行实现
微信小程序开发遇到的问题
kite博客
07-06 3151
【代码】微信小程序开发遇到的问题。
How to Preloading content with rel preload
weixin_30872499的博客
04-12 151
The preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your HTML <head>, specifying resources that your pages will need very soon after l...
vue报错The resource ＜URL＞ was preloaded using link preload but not used within a few seconds from the
hahah12345678的博客
07-28 1万+
vue 报错
【已解决】微信小程序编译后白屏（The resource was preloaded using link preload but not used within a few seconds ...）
热门推荐
程序边界
06-24 1万+
事情发生在重装微信小程序开发者工具后。。。微信小程序编译后白屏，控制台报错： 二、解决 对比之前开发工具的设置，发现不知何时手残多打了一个勾：使用独立域进行调试 去掉后，正常了。。。白屏挺常见的，原因也是千奇百怪，此解决方法仅限此原因。。。...
Vue报错was preloaded using link preload but not used within a few seconds from the window‘s load
Lzen6719的博客
03-06 6650
在vue小程序开发的时候报了一个不知所以的错误，后来发现是因为注释的问题，这解析太严谨了。
vue3打包部署后，报错解决记录。访问页面index.html空白、页面刷新后nginx404问题
weixin_42508580的博客
09-29 6423
项目情况：使用的createWebHistory创建history达到访问路径不带#的效果，但是发现项目没有配置nginx转发，在vue-router文档中，配合createWebHistory使用需要nginx配置转发到index.html。在webpack配置中（vue.config.js）配置chunks时通过加入[‘chunk-vendors’, ‘chunk-common’]参数来解决预加载问题，如下。提示使用链接预加载的，但在窗口加载事件后的几秒钟内没有使用。值，并且是故意预装的。
页面多次加载缓慢的原因
Pandora_417的博客
07-13 4570
这里的场景是，页面的遮罩层modal框刚触发关闭，另一个带动画效果的DOM元素点击后出现在页面中，并且触发这个警告信息的页面渲染也十分卡顿。 通过nextTick解决当前页面上的DOM冲突和也可能是点击事件里面产生bug了...
The resource url was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
03-19
根据用户的描述，警告信息是“resource url preloaded with link preload not used within a few seconds from window load event”，这意味着在使用`<link rel="preload">`预加载某个资源后，浏览器在窗口加载事件...
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
最新发布
03-29
要解决预加载资源未被使用的警告（preload resource not used warning），需要确保预加载标签的`as`属性值与资源类型匹配，且资源在后续流程中被实际使用。以下是具体步骤： ### 1. **检查`as`属性有效性** - 必须...
vue 项目 警告 The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
07-20
这个警告是由浏览器发出的，它表示某个资源使用了 link preload 进行预加载，但在窗口加载事件后的几秒内没有被使用。浏览器建议为预加载资源设置适当的 `as` 值，并确保它的预加载是有意义的。 要解决这个警告，你...
vue 警告The resource http://localhost:9006/static/css/app.4b270983.css?1689321415059 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally. 如何解决，给个例子
07-15
这个警告表示某个资源（在这个例子中是 `http://localhost:9006/static/css/app.4b270983.css?1689321415059`）使用了 link preload 进行了预加载，但在窗口加载事件后的几秒内没有被使用。为了解决这个问题，你可以...
vue-cli3及以上版本创建多页面应用。
wkq_1212的博客
07-22 1056
为什么要多页面？ 以实际场景为例，到了某个节日，需要根据需求做一个活动页，并且活动页技术体系和原本单页面一样（如vue），并且多端共用此页面（不能集成在原本的单页应用里了，太庞大）。那么我们要么是单独开一个项目，要么就是想办法将项目改造成多页面。介于前者太浪费资源且没必要（因为很多共用部分，甚至组件共用），所以我们选择将vue-cli改造成多页面应用。 先摆一些小坑： 1.无法通过路径访问多页面的某一页面，例如： http://172.16.10.181:8080/subPage.htm...
uniapp微信开发者工具调试只有＜page＞＜/page＞
ABinnnn的博客
06-21 1530
uniapp运行到微信开发者工具很坑的问题，运行到微信开发者工具后，报错was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally....
解决路径无法通过超链访问
shigecainiao的博客
06-05 186
当点击访问页面中外链地址时，会产生一个http请求（用于获取外链地址内容），此时出于安全策略（一些用户信息或登录信息会通过url传递），浏览器会在请求头中添加一个referrer，用来表示当前请求是从哪个页面跳转来的，也就是访问来源。现在问题已经知道了，剩下的就是解决了。我们需要将请求头的referrer给去掉。referrer是用于追踪用户是从哪个页面跳转过来,设置为no-referrer,表示所有请求都不发送referrer.最近在需求中需要通过一个外链来访问客户网站，但是试了很多种跳转方式都不行。
web字体设置成平方字体_Web字体正确完成
weixin_26732881的博客
09-01 1476
web字体设置成平方字体When using web fonts we must carefully avoid its hidden pitfalls. To do this designers, frontend developers, DevOps, and authors each have a role to play in creating a great end-user exper...
Android WebView专题
一根火柴博客
11-14 535
Android WebView使用：实现H5调用原生数据库增、查询。
[HPM] Error occurred while trying to proxy request api from a to b(ENETUNREACH)；接口报错500
qq_45327886的博客
09-10 864
proxy报错：ENETUNREACH；接口报错500
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值