vue项目部署，自动清除缓存配置

清除文件缓存

1.index.html 文件添加 http-equiv(http 响应头)

通过在head标签中添加meta，当浏览器访问index.html时，会向服务器重新请求静态资源。该方法了解即可，不推荐使用，会导致用户每次访问程序都需要重新请求服务器，所有静态资源都无法使用缓存，浪费流量，网络压力大。

// 设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。
<meta http-equiv="Expires" content="0">
// 设定禁止浏览器从本地机的缓存中调阅页面内容
<meta http-equiv="Pragma" content="no-cache">
// 清除缓存，再次访问这个网址要重新下载
<meta http-equiv="Cache-control" content="no-cache">

2.给打包的js、css文件添加时间戳

项目打包时给js、css文件加上时间戳，保证输出的文件名不会相同，通过 vue.config.js 进行配置。

// 获取当前时间戳
const timeStamp = new Date().getTime()
// 时间戳配置
module.exports = {// 打包后的文件输出路径outputDir: 'dist',configureWebpack: {// 输出重构 打包编译后的js文件名称，添加时间戳output: {filename: `js/[name].${timeStamp}.js`,chunkFilename: `js/[name].${timeStamp}.js`,}},css: {// 输出重构 打包编译后的css文件名称，添加时间戳extract: {filename: `css/[name].${timeStamp}.css`,chunkFilename: `css/[name].${timeStamp}.css`,}}
}

了解：
filename：指列在 entry（入口）中，打包后输出的文件的名称
chunkFilename：指未列在 entry 中，却又需要被打包出来的文件的名称（懒加载的文件）

清除浏览器 localStorage 缓存

1、更新package.json中的 version 值，每次打包往上递增
2、main.js中，根据 version 判断是否进行缓存清理

const VUE_APP_VERSION = require('../package.json').version
const vers = window.localStorage.getItem('appVersion')
if(VUE_APP_VERSION != vers){localStorage.clear()window.localStorage.setItem('appVersion', VUE_APP_VERSION)location.reload()
}

vue项目部署，自动清除缓存配置相关推荐

面试宝典六-- 项目部署（linux环境搭建，springboot项目部署，vue项目部署，nginx负载均衡）
环境准备实际开发中,项目肯定是部署在一个个的linux系统服务器中的,学习过程中,可以在自己电脑上安装虚拟机然后配置linux操作系统进行模拟项目部署,当然也可以花费较小费用使用各种平台提供的云服 ...
linux 退出服务器_Vue实战091：Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...
vue项目部署到服务器后浏览器标签上的小图标消失不见
背景: 最近在开发项目过程中发现一个问题,项目部署到服务器后在浏览器打开,会发现浏览器标签上的小图标消失不见了.百度查找问题,网上给出了许多解决的方案,例如清除浏览器缓存.把图标的相对路径改成绝对路径 ...
Vue项目部署及使用WebStorm开发Vue
Vue项目部署及使用WebStorm开发Vue Vue项目部署搭建Vue环境新建Vue项目使用WebStorm开发Vue WebStorm相关配置配置路由全局页面App.vue 全局引入组件 ...
将springboot项目和vue项目部署到windows 2016 server（服务器）
将springboot项目和vue项目部署到服务器 1.服务器环境配置 1.1 服务器需要安装的环境 1.2 服务器需要配置的入站与进站规则 2.springboot项目的打包 2.1 springb ...
vue项目部署到nginx
vue项目部署到nginx 一.vue项目打包修改config/index.js的assetsPublicPath为 ./(注意一定是build里面的,下面dev中也有这个配置) 这个路径的配置很重 ...
Vue项目部署到CentOS服务器
Vue项目部署到CentOS服务器 config/index.js上修改以下部分: 首先是host:'localhost'改为服务器ip assetsPublicPath:'/'改为assetsPub ...
springboot项目部署 + vue项目部署
部署一个简单的前后端分离的博客项目 springboot项目部署第一步:打包springboot项目(jar包) 第二步:将jar(项目的target目录下)包上传到云服务器上(Xftp) 第三步: ...
将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题
将Vue项目部署在Nginx,解决前端路由.反向代理和静态资源问题需求: 一台服务器,Linux 安装了Nginx 使用Vue脚手架编写的Vue项目第一步:将Vue项目打包,然后将生成的dist文 ...

vue项目部署，自动清除缓存配置

清除文件缓存

清除浏览器 localStorage 缓存

vue项目部署，自动清除缓存配置相关推荐

最新文章

热门文章