admin管理员组文章数量:1531542
VUE
文章目录
- 前言
- 一、为什么会这样?
- 二、如何解决
- 1.具体操作
- 2.打包测试
- 总结
前言
最近客户和我反应一个问题他们在服务器上更新包后,发现页面并没有更新,而且简单刷新浏览器页面也没有效果,必须要清理浏览器缓存,页面才会刷新。
提示:以下是本篇文章正文内容,下面案例可供参考
一、为什么会这样?
仔细看引用的js 发现更新前后 引用的JS路径是一样的,而js是从服务器上下载本地浏览器的,如果不刷新浏览器缓存。更新后引用JS,CSS,还有一些静态资源还都是浏览器缓存中
二、如何解决
既然引用地址没有变化,我们能不能将引用的JS,CSS 什么的名字变得都不一样不就行了吗。
1.具体操作
我们可以在vue 打包时,给js,css 加上一些参数后缀,具体操作是在vue项目的 vue.config.js 的 chainWebpack 填上这样一段代码即可
if (process.env.NODE_ENV === 'production') {
// 给js和css配置Timestamp
config.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配置Timestamp
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
})
}
// 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 项目更新部署时,浏览器页面缓存问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1725797919a1043210.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论