Failed to fetch dynamically imported module

1. 这个错误是怎么触发的

       假设你的网站域名是 www.xxx.com,你有三个路由 /home  /about  /dashboard

        用户A 第一次访问 www.xxx.com/home 的时候,浏览器会自动缓存 /home 所需要的静态资源,然后访问 www.xxx.com/about,浏览器会再次缓存 /about 所需要的静态资源。

        这时,我们重新修改代码,并发布上线。用户A 本地有 /home.  /about 缓存,所以切换这两个页面不会出错,然而 用户A 并没有访问过 /dashboard,所以 /dashboard 页面的静态资源并没有加载且缓存。

        所以当 用户A 在 /home 路由下访问 /dashboard 的时候,因为当前路由 /home 下使用的还是浏览器的缓存,所以 访问 /dashboard 用的也是旧的资源链接,进而引发出了报错 Failed to fetch dynamically imported。如果你的 nginx 配置了 访问不到资源就跳转到 index.html 那么还有可能会报错 Failed to load module script

2. 如何解决这个问题

        这个问题现阶段其实并没有一个比较官方的解决方法

        首先我们知道,用户在不刷新页面的情况下,访问的一定是缓存的代码。因为前端的资源都是静态的,所以我们必须找到一个动态的内容去让用户手动触发更新,或者通过动态内容替用户更新。

        很明显,动态的内容最简单的方案就是后台的接口,后台访问前端当前代码的版本。我们每隔一段时间去请求后台,当后台返回的版本和当前版本不一致的时候,就弹出一个按钮,或者直接帮用户刷新页面,那么前端的资源就更新为最新页面了。

        不通过后台的方案就是发布的时候,你在 public 文件夹里存一个 version.txt,每次发布的时候改一下里边的内容。因为 public 文件发布后是不会加 hash 的,所以请求 /version.txt 的时候不能使用缓存 Cache-Control: no-store。

        其实当我们打开 vue、react、vite 官网时,如果长时间不退出且不刷新页面,右下角就会弹出一个提示框,内容有更新,当我们点击这个按钮的时候,页面就会刷新一次,应该(我没去验证,猜的)也是一样的方法去实现内容更新的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/57998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git clone完整使用手册

git-clone - 将一个仓库克隆到一个新目录中 用法 git clone [--template<模板目录>][-l] [-s] [--no-hardlinks] [-q] [-n] [--bare] [--mirror][-o <名称>] [-b <名称>] [-u <上传包>] [--reference <仓库>][--dissociate] [--separate-git-d…

python多线程处理xlsx,多进程访问接口

import pandas as pd from concurrent.futures import ThreadPoolExecutor# 读取Excel文件 file_path scence.xlsx df pd.read_excel(file_path)# 定义每10行处理逻辑 def process_rows(start_idx):end_idx min(start_idx 10, len(df)) # 处理每10行for i in range(start_…

【Linux系统】进程终止

一、进程退出方式 1、正常终止 主要两种类型&#xff1a;从 main 返回、调用 exit 和 _exit 具体讲解如下&#xff1a; &#xff08;1&#xff09;从 main 返回 这个的使用就不用多说了吧&#xff0c;相信你们已经烂熟于心了 作用&#xff1a;return 语句用于从函数中返回…

一篇文章了解RocketMQ基础知识。

目录 一. 为什么选择了 RocketMQ &#xff1f; 二. RocketMQ 介绍 名词说明 1. Topic (主题) 1.1 Topic 核心作用 1.2 Topic 常见问题 2. Tag (标签) 3. Queue (队列) 3.1 Queue 读写队列 4. Message &#xff08;消息&#xff09; 4.1 Message 类型 5. Produ…

Navicat 基础操作和 SQL 语句详解

Navicat 是一个流行的数据库管理工具&#xff0c;支持多种数据库&#xff08;如MySQL、MariaDB、SQL Server、PostgreSQL等&#xff09;。在Navicat中&#xff0c;你可以通过GUI界面来管理数据库&#xff0c;也可以直接编写SQL语句。下面我将介绍如何在Navicat中执行一些基础的…

NVR录像机汇聚管理EasyNVR多品牌NVR管理工具/设备视频报警功能详解

在科技日新月异的今天&#xff0c;视频监控系统作为现代社会的“第三只眼”&#xff0c;正以前所未有的方式深刻影响着我们的生活与社会结构。从公共场所的安全监控到个人生活的记录分享&#xff0c;视频监控系统以其独特的视角和功能&#xff0c;为社会带来了诸多好处&#xf…

day10:ssh服务-跳板机

一&#xff0c;ssh服务概述 ssh服务概述 ssh&#xff08;Secure Shell&#xff09;是一种用于在不安全网络中进行安全登录、远程执行命令及传输文件的网络协议。它通过加密技术来保证通信的保密性和完整性&#xff0c;主要用于替代不安全的telnet、rlogin、rsh等协议。ssh通常…

表达式求值(2020cspj)

题目描述 给定一个只包含加法和乘法的算术表达式&#xff0c;请你编程计算表达式的值。 输入格式 一行&#xff0c;为需要你计算的表达式&#xff0c;表达式中只包含数字、加法运算符 和乘法运算符 *&#xff0c;且没有括号&#xff0c;所有参与运算的数字均为 0 到 231−1…

python爬虫实战案例——抓取B站视频,不同清晰度抓取,实现音视频合并,超详细!(内含完整代码)

文章目录 1、任务目标2、网页分析3、代码编写 1、任务目标 目标网站&#xff1a;B站视频&#xff08;https://www.bilibili.com/video/BV1se41117WP/?vd_sourcee8e376ccbc5aa4cfd88e6a7917adfd1a&#xff09;&#xff0c;用于本文测验 要求&#xff1a;抓取该网址下的视频&…

【制造业&电子产品】电脑电子元件检测系统源码&数据集全套:改进yolo11-TADDH

改进yolo11-SCConv等200全套创新点大全&#xff1a;电脑电子元件检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.24 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或者…

Linux: network: wireshark IO图的一个问题

今天遇到一个问题&#xff0c;发现wireshark画的IO图&#xff0c;前几秒没有数据&#xff0c;但是根据Raw的pcap看&#xff0c;是有包的&#xff0c;这就迷惑了。 经同事提醒&#xff0c;这个IO在设置了多个画图filter的时候&#xff0c;可能导致开始前几秒没有输出。如下图 这…

jenkins ssh 免密报错Host key verification failed.

jenkins 发布项目&#xff0c;ssh连接远程服务器时报错&#xff1a;Host key verification failed. 解决&#xff1a; 原因是生成的sshkey不是用的jenkins用户&#xff0c;所以切换用户到&#xff1a;jenkins重新生成sshkey su jenkins ssh-keygen -t rsa ssh-copy-id -i ~/…

#渗透测试#安全见闻7 硬件设备的网络安全问题与潜在漏洞分析

安全见闻7 硬件设备的网络安全问题与潜在漏洞分析及渗透测试应用 ##B站陇羽Sec## 硬件设备在网络系统中扮演着至关重要的角色&#xff0c;它们构成了网络的物理基础&#xff0c;确保数据能够有效地传输和处理。以下是几种关键的硬件设备及其在网络中的作用&am…

mysql8数据库备份

1、背景 mysql 8备份策略&#xff0c;备份7天&#xff0c;每天全量备份一次。 2、方案 在 MySQL 8 中&#xff0c;你可以使用 mysqldump 工具来创建数据库的全量备份。要实现每天全量备份一次&#xff0c;并且保留最近7天的备份&#xff0c;你可以设置一个自动化的备份策略&am…

C# 串口通信教程

串口通信&#xff08;Serial Communication&#xff09;是一种用于设备之间数据传输的常见方法&#xff0c;通常用于与外部硬件设备&#xff08;如传感器、机器人、微控制器&#xff09;进行通信。在 C# 中&#xff0c;System.IO.Ports 命名空间提供了与串口设备交互的功能&…

2024Flutter面试题

1.Dart是值传递还是引用传递&#xff1f; dart是值传递。 每次调用函数&#xff0c;传递过去的都是对象的内存地址&#xff0c;而不是这个对象的赋值。 2.简述Dart语音特性 在Dart中&#xff0c;一切都是对象&#xff0c;所有的对象都是继承自Object Dart是强类型语言&#…

mono源码交叉编译 linux arm arm64全过程

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…

GPT-4o 和 GPT-4 Turbo 模型之间的对比

GPT-4o 和 GPT-4 Turbo 之间的对比 备注 要弄 AI &#xff0c;不同模型之间的对比就比较重要。 GPT-4o 是 GPT-4 Turbo 的升级版本&#xff0c;能够提供比 GPT-4 Turbo 更多的内容和信息&#xff0c;但成功相对来说更高一些。 第三方引用 在 2024 年 5 月 13 日&#xff0…

8.MySQL复合查询

目录 复合查询基本查询回顾多表查询 - 笛卡尔积自连接子查询单行子查询多行子查询多列子查询在from中使用子查询 合并查询unionunion all 表的内连和外连内连接外连接左外连接右外连接 复合查询 前面我们讲解的mysql表的查询都是对一张表进行查询&#xff0c;在实际开发中这远远…

HTML+JavaScript案例分享: 打造经典俄罗斯方块,详解实现全过程

在本文中,我们将深入探讨如何使用 JavaScript 实现经典的俄罗斯方块游戏。俄罗斯方块是一款广为人知的益智游戏,通过操纵各种形状的方块,使其在游戏区域内排列整齐,以消除完整的行来获得分数。 效果图如下: 一、游戏界面与布局 我们首先使用 HTML 和 CSS 来创建游戏的界面…