vue离线缓存资源文件

本文章主要是解决大文件,实时请求资源浪费网络资源的问题

从而有效的将解决用户体验的问题

话不多说上才艺 ⬇️⬇️⬇️⬇️⬇️⬇️⬇️

  1. 找到项目中的 index.html 文件,并在 html 标签中加入
     manifest="manifest.appcache"

     
  2. 安装 appcache-manifest 包
    npm install -D appcache-manifest

  3. 找到项目中的 package.json 文件, 并在 scripts 标签中加入以下代码
    // 其中的dist 为build后的目录名称"cache": "cd ./dist && appcache-manifest './**/**/**/**/**.**' --network-star -o ./manifest.appcache && cd ../"

  4. 执行打包build命令后执行cache命令

    npm run build// 执行build后执行
    npm run cache
  5. 会自动生成文件 manifest.appcache 文件

  6. 查看网络状态会显示disk cache

     

    完事!!

     

 

 

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

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

相关文章

【NPM】包的指令

npm 安装的包可以根据其用途和作用进行分类,一般可以分为以下几种类型: 普通依赖(Regular Dependencies): 这些是你项目中的实际依赖项,用于构建、运行或扩展你的应用程序。这些依赖会被包含在你的应用程序…

c++ qt--信号与槽(二) (第四部分)

c qt–信号与槽(二) (第四部分) 信号与槽的关系 1.一对一 2.一对多 3.多对一 4.多对多 还可以进行传递 信号->信号->槽 一个信号控制多个槽的例子(通过水平滑块控制两个组件) 1.应用的组件 注意这里最下面的组件进行…

【Qt学习】06:事件与事件过滤器

OVERVIEW 事件与事件过滤器一、事件1.鼠标事件创建子类MyLabel重写鼠标事件提升Label控件为MyLabel 2.定时器事件timerEventQTimer 3.事件分发器(event函数)event函数重写event函数深入 二、事件过滤器1.事件过滤器2.事件处理的五个层次 事件与事件过滤器…

Tomcat和Servlet基础知识的讲解(JavaEE初阶系列16)

目录 前言: 1.Tomcat 1.1Tomcat是什么 1.2下载安装 2.Servlet 2.1什么是Servlet 2.2使用Servlet来编写一个“hello world” 1.2.1创建项目(Maven) 1.2.2引入依赖(Servlet) 1.2.3创建目录(webapp&a…

VR法治警示教育:情景式课堂增强教育效果

VR法治警示教育平台是一款基于虚拟现实技术的在线教育平台,旨在通过模拟真实场景和互动体验,向公众普及法律知识,提高公民的法律意识和素养。该平台采用先进的虚拟现实技术,将用户带入一个逼真的仿真环境,让用户身临其…

python systemrdl 使用实例

今天来看一个具体实例,上一篇传送门:python SystemRDL 包介绍_Bug_Killer_Master的博客-CSDN博客 通常来说,我们验证过程用到的情况大多都是需要提取reg field的路径以及reset 值等信息,所以比较常见的一种方法就是先把rdl compil…

计算机网络文件拆分—视频流加载、断点续传

视频流加载 视频流加载的原理是通过网络传输和播放器解码来实现的。 首先,视频文件会被分成一系列小的数据包,通常是以流的形式传输,这些数据包通过网络传输到用户设备。在传输过程中,可以采用各种协议,如HTTP、RTSP…

简析SCTP开发指南

目录 前言一、SCTP基本概念二、SCTP开发步骤1. **环境配置**:2. **建立Socket**:3. **绑定和监听**:4. **接收和发送数据**:5. **关闭连接**: 三、 C语言实现SCTP3.1SCTP客户端代码:3.2 SCTP服务器端代码&a…

识别图片中的文字

前言 PearOCR 是一款免费无限制网页版文字识别工具。 优点如下: 免费:完全免费,没有任何次数、大小限制,可以无限使用; 安全:全部数据本地运算,所有图片均不会被上传; 智能&#xf…

SQL注入之HTTP头部注入

文章目录 cookie注入练习获取数据库名称获取版本号 base64注入练习获取数据库名称获取版本号 user-agent注入练习获取数据库名称获取版本号 cookie注入练习 向服务器传参三大基本方法:GPC GET方法,参数在URL中 POST,参数在body中 COOKIE,参数…

OpenSIPS 通话中 UPDATE 请求导致没有声音问题

文章目录 1. 问题现象2. 抓包排查3. 问题分析及解决方案 1. 问题现象 在 SIP 应用的开发中,通话一端听不到声音是比较常见的问题。一般来说,没有声音意味着 RTP 传输存在障碍,追根究底就是网络不通或者端口未开放等原因。但在实践中&#xf…

Kotlin Flow 转换以及上下游处理

本片文章主要介绍Flow上下游处理,上游一个Flow使用map,上游两个Flow使用zip,上游三个Flow及以上使用combine 1、下面代码展示了upStreamFlow作为上游,downStreamFlow作为下游,通过对upStreamFlow使用map操作符函数将…

13.Oracle中nvl()与nvl2()函数详解

Oracle中nvl()与nvl2()函数详解: 函数nvl(expression1,expression2)根据参数1是否为null返回参数1或参数2的值; 函数nvl2(expression1,expression2,expression3)根据参数1是否为null返回参数2或参数3的值 1.nvl:根据参数1是否为null返回参数…

数据结构——图

文章目录 图的基本概念顶点边度无向图和有向图无权图和带权图 图的存储邻接矩阵存储邻接表存储 图的搜索广度优先搜索深度优先搜索 图是一种较为复杂的非线性结构。 为啥说其较为复杂呢? 根据前面的内容,我们知道: 线性数据结构的元素满足唯…

nodejs

文章目录 一、nodejs1.1、npm配置命令别名 一、nodejs 1.1、npm配置命令别名 我们可以使用“node index.js”的方式运行代码 也可以利用npm配置别名的方式运行代码 在package.json中配置别名,利用“npm run 别名”也可以运行 start是特殊的,可以“npm r…

ssm+Vue.js在线购物系统源码和论文

ssmVue.js在线购物系统源码和论文049 开发工具:idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 技术:ssm 摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势…

GPT---1234

GPT:《Improving Language Understanding by Generative Pre-Training》 下载地址:https://cdn.openai.com/research-covers/language-unsupervised/language_understanding_paper.pdfhttps://cdn.openai.com/research-covers/language-unsupervised/language_understa…

保姆级使用vmware安装Ubuntu-server版

保姆级VMware安装Ubuntu20服务器版 文章目录 保姆级VMware安装Ubuntu20服务器版前期准备一、安装vmware二、下载Ubuntu镜像 VMware安装Ubuntu201. 启动Workstation Pro或者Workstation Player,进入软件后新建一个虚拟机2. 进入引导界面选择默认的即可3. 点击下一步即可4. 选择操…

Selenium超级详细的教程

Selenium是一个用于自动化测试的工具,它可以模拟用户在浏览器中的各种操作。除了用于测试,Selenium还可以用于爬虫,特别是在处理动态加载页面时非常有用。本文将为您提供一个超级详细的Selenium教程,以帮助您快速入门并了解其各种…