前言

最近客户和我反应一个问题他们在服务器上更新包后，发现页面并没有更新，而且简单刷新浏览器页面也没有效果，必须要清理浏览器缓存，页面才会刷新。

提示：以下是本篇文章正文内容，下面案例可供参考

一、为什么会这样？

仔细看引用的js 发现更新前后引用的JS路径是一样的，而js是从服务器上下载本地浏览器的，如果不刷新浏览器缓存。更新后引用JS，CSS，还有一些静态资源还都是浏览器缓存中

二、如何解决

既然引用地址没有变化，我们能不能将引用的JS，CSS 什么的名字变得都不一样不就行了吗。

1.具体操作

我们可以在vue 打包时，给js，css 加上一些参数后缀，具体操作是在vue项目的 vue.config.js 的 chainWebpack 填上这样一段代码即可

if (process.env.NODE_ENV === 'production') {// 给js和css配置Timestampconfig.output.filename('static/js/[name].' + Timestamp + '.js').end()config.output.chunkFilename('static/js/[name].' + Timestamp + '.js').end()config.plugin('extract-css').tap(args => [{filename: `static/css/[name].${Timestamp}.css`,chunkFilename: `static/css/[name].${Timestamp}.css`}])// 给img配置Timestampconfig.module.rule('images').use('url-loader').tap(options => {options.name = `static/img/[name].${Timestamp}.[ext]`options.fallback = {loader: 'file-loader',options: {name: `static/img/[name].${Timestamp}.[ext]`}}return options})}// Timestamp 时间设置的一个变量 直接在module.exports 上面 const Timestamp = new Date().getTime()

2.打包测试

发现直接刷新浏览器发现 JS 后参数带上我设置的时间戳，测试成功。这样我们只需要更新项目后，点击浏览器刷新即可刷新页面了

总结

注意点这段代码是操作我的图片标签的，如果你使用了其他标签，都可用这段代码进行操作

 config.module.rule('images').use('url-loader').tap(options => {options.name = `static/img/[name].${Timestamp}.[ext]`options.fallback = {loader: 'file-loader',options: {name: `static/img/[name].${Timestamp}.[ext]`}}return options})

if (process.env.NODE_ENV === 'production') {

这段是判断我们的打包生产环境的，一定要带上。不然本地的DEV环境是无法启动的。

VUE 项目更新部署时，浏览器页面缓存问题相关推荐

vue项目保存代码后浏览器页面自动更新
vue.config.js种添加如上红色色框内内容,其中8081替换为自己电脑的主机号
Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
vue项目如何部署到nginx服务器
mac下安装nginx 安装工具: homebrew(还没用过的小伙伴可以点链接进行了解或者自行百度) 步骤: 1.打开终端,习惯性命令:更新 brew update 2.终端继续执行命令: brew ...
面试官：vue项目如何部署？有遇到布署服务器后刷新404问题吗？
一.如何部署前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后,是生成一系列的静态文件常规布署我们只需要将 ...
30.vue项目如何部署？有遇到布署服务器后刷新404问题吗？
一.如何部署前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后,是生成一系列的静态文件常规布署我们只需要 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue项目打包部署linux_Vue项目打包部署到Nginx服务器
"随着前后端分离项目的流行,vue项目开发部署也成为了前端人员必备技能:本文将带你学习vue项目部署及遇到的各种坑." 关于vue项目部署不得不提的是配置文件vue.config. ...
vue项目如何部署？布署服务器后刷新404如何解决？
一.如何部署前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后,是生成一系列的静态文件常规布署我们只需要 ...

VUE 项目更新部署时，浏览器页面缓存问题

文章目录

前言

一、为什么会这样？

二、如何解决

1.具体操作

2.打包测试

总结

VUE 项目更新部署时，浏览器页面缓存问题相关推荐

最新文章

热门文章