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
   

    

   完事!!