大家用vue脚手架搭建前端工程时，常被缓存问题所困扰，具体的表现就是，当程序版本升级时，用户因为缓存访问的还是老的页面，然后很多同学很暴力的直接在index.html中加入了这几行代码：
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
升级时缓存问题倒解决了，但直接导致了用户每次访问你的程序时都要重新请求服务器，所有的静态资源都无法用缓存了，浪费流量，网络压力变大。
我们真正需要解决的问题，不是单纯的要缓存或者不要缓存，而是期望视情况而定：
1、程序每次升级后，用户都不会因为缓存问题而执行的仍然是老的程序。
2、若程序没升级，用户对静态资源的请求则能用到缓存。
由于vue脚手架每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。那么只需让index.html不缓存，且让其他静态资源缓存，就能实现要求。
vue-cli打包后生成的js文件
让静态资源有缓存好办，问题在于怎么只让index.html不缓存。这里我们已经不能单单靠前端代码来实现了，需要用到服务器配置。通过服务器配置，来单独设置请求index.html时的header，以达到控制缓存的目的。
如果你用Ngnix：
Ngnix还是比较容易实现的，只需增加以下配置：
location = /index.html {
add_header Cache-Control "no-cache, no-store";
如果你用Tomcat：
tomcat稍微麻烦点，需要开发并配置一个过滤器（Filter），如果你只懂前端，那可能需要找后端的兄弟帮忙了。
1、首先我们要用java写个过滤器：
注意：路径要和第三步的配置保持一致
2、然后我们把这个过滤器打成jar包，名字随便，放在tomcat/lib目录下即可。
3、最后，我们需要修改配置文件tomcat/conf/web.xml，在末尾</web-app>的上方增加以下代码：
MyFilter是你给过滤器起的名字，可随便改
也没有太麻烦，应该大部分同学都能搞定。
问题描述大家用vue脚手架搭建前端工程时，常被缓存问题所困扰，具体的表现就是，当程序版本升级时，用户因为缓存访问的还是老的页面，然后很多同学很暴力的直接在index.html中加入了这几行代码：<meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache">...
最近在做一个vue移动端项目，被缓存问题搞得头都大了，积累了一些经验，特此记录总结下，权当是最近项目问题的一个回顾吧！
先描述下问题场景：A页面->B页面->C页面。假设A页面是列表页面，B页面是列表详情页面，C页面是操作改变B页面的一些东西，进行提交类似的操作。A页面进入B页面，应该根据不同的列表item显示不一样的详情，从B进入C，也应该根据item的标识比如ID展示不一样的内容，在C页面操作后，返回B页面，B页面数据发生变化。这个时候会有两种情况：
C页面操作数据后返回B页面，B页面对应数据应该发生变化。
C页面直接点击左上角箭头返回，B页面对应数据不应该发生变化。继续返回A列表
在做的项目是使用 vue-cli 脚手架为基础的，只能使用微信浏览器打开的。在某次更新功能代码后，被反馈在一些手机上会出现白屏。经过一番探索，多管齐下解决了问题
白屏可能的原因：
es6 代码没有被编译成 es5 ；
文件打包路径错误；
运营商塞入的广告 js 服务器报错，连累项目不能下载资源；
针对 1 和 2 ，分别采取以下做法：
解决位置：config/index.js 文件：把 assetsPublicPath: ‘/’ 改为assetsPublicPath: ‘./’
build: {
assetsPublicPath: './',
解决位置：
首先安装 b
在vue项目开发中，一直有一个令人都疼的问题，就是缓存问题；每次发版完之后由于浏览器缓存机制，用户端不会实时获取新的项目页面，甚至有可能出现静态文件获取报404，之前的解决方案是告知用户手动清理浏览器缓存，但是这种方式并不友好，因为用户未必知道怎么清理缓存，而且就算用户知道怎么清理缓存，也不清楚什么时候该清理。所以针对这种问题，推出了一种新的解决方案。
方案思路：
一. public/index.html配置meta，去掉缓存
二. 打包，在此过程中做了一下几件事情：
1.生成一个随机版本号..
clearMapstore(){
localStorage.removeItem('_AMap_vectorlayer')
localStorage.removeItem('_AMap_wgl')
localStora
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js'),
chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].' + version..
每次把修改后的vue项目build构建的打包文件丢到线上服务器后，发现还是上一次的效果，新修改的不起效，每次都需要ctrl+F5强制刷新页面，用户太多不可能让所有人每次都这样去折腾，为啥？
vue cli不是给静态资源css、js、img自动加了哈希么，怎么还会有缓存？
经过多方调试，发现是因为入口文件index.html需要在服务器端设置禁止缓存。
解决缓存问题可以分两步走：
①nginx配置index不缓存
②代码加入版本更新检测强制刷新
解决方案一：（Linux服务器设置
在开发vue的项目中有遇到了这样一个需求：一个视频列表页面，展示视频名称和是否收藏，点击进去某一项观看，可以收藏或者取消收藏，返回的时候需要记住列表页面的页码等状态，同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面，也就是进入的时候是视频列表页面的第一页
一句话总结一下： pageAList->pageADetail->pageAList,...
实现Vue前端打印的方法有多种。其中一种方法是通过引入打印插件来实现。你可以在后台功能中查询合适的插件并进行下载，然后在前端中使用该插件来进行打印操作。
另外，需要注意的是在处理打印逻辑之前，要确保样式已经正确引入，否则打印的页面可能会没有样式。你可以单独引入一个print.scss文件或者使用@media print {}来调整一些样式。这样可以确保打印页面的样式与预期一致。
如果打印的内容中包含线上图片资源，并且你不想进行服务器配置，可以考虑在浏览器关闭获取缓存文件的方式来解决。这样可以保证每一次获取的都是线上文件，避免打印时出现图片跨域的错误。需要注意的是，前端无法获取你点击打印或者取消的事件，只能获取你是否关闭打印框的事件。
综上所述，你可以通过下载适合的打印插件来实现Vue前端打印功能，并在处理打印逻辑前确保样式已正确引入。如果打印内容中包含线上图片资源，可以通过浏览器关闭获取缓存文件的方式来避免跨域错误。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue 前端实现打印功能](https://blog.csdn.net/m0_64344940/article/details/128405517)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue前端实现打印功能](https://blog.csdn.net/love521334421/article/details/125163942)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
