如何让网页在第一次访问过后缓存下来,之后在无网络环境下也可以运行

为了毕设

我希望我的页面可以在第一次访问过后缓存下来(不是下载),之后在无网络环境下也可以运行,就像下图的vuetify页面一样
我觉得可能和 f12 => 应用程序 => 帧 => top => 安全上下文有关,但我对此一窍不通

普通页面断网情况下,不安全,vuetify断网情况下安全

希望有有能之士教我如何想vuetify页面那样,能为我指点迷津,感谢

(我的前端框架是vue-cli2)

使用H5提供的技术 applicationCache 来进行网页离线缓存也许可以解决你的诉求

你想多了
既然是毕设，那你肯定要演示功能吧，不只是放PPT吧
要是放PPT，你不如截图做成真PPT
如果要代码有响应，那肯定不能只离线吧
除非你的项目几句js就解决了，我觉得那也太不像个毕设了吧
你为什么不把IIS和数据库放自己笔记本上呢

浏览器不是自带缓存功能吗？要不然当第一次页面加载过后为什么第二次访问会更快呢?
毕设的时候，不都是用本机作为环境的吗？不论前端还是后端只要在本机跑起来，就可以访问。网络环境只是为了不同计算机之间进行相互交流使用的。在本机访问就不需要网络环境的
如果想要在网络下运行，那可以选择尝试将项目完成后打包运行在阿里云服务器上

给html标签添加manifest="demo.appcache"，并在html同源创建demo.appcache文件就可以进行缓存，访问过的页面，离线了再次访问仍然可以访问。
通过demo.appcache文件配置要缓存的内容，添加版本为了可以更好的更新缓存，底下列出来的就是要缓存的同源文件。
```
CACHE MANIFEST
#v0.0.1
/index.html
```

用自己的电脑，假设一下IIS，在自己的电脑演示不就好了

可不可以把网页的web源码保存下来，自己在visual studio code里运行呢。

vue 几种配置缓存与不缓存
第一种：

<template>
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
                    <router-view v-if="!$route.meta.keepAlive"></router-view>
            </template>

router 加上配置

meta: {

keepAlive: true // false
}

第二种：

<keep-alive exclude="goodsEdit,adEdit">
      <router-view></router-view>
</keep-alive>

include属性表示只有name属性为goodsEdit,adEdit的组件会被缓存,
注意是组件的name, 还有就是逗号后面不能空格（填坑）

感谢各位的回答，appcache的方案试过了，但不管用，最终的解决方案是：网站升级为https并使用service worker离线缓存，预期效果已经达到