900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue 版本更新使用webpack优化打包 解决用户浏览器缓存问题

vue 版本更新使用webpack优化打包 解决用户浏览器缓存问题

时间:2023-07-08 06:30:04

相关推荐

vue 版本更新使用webpack优化打包 解决用户浏览器缓存问题

1、修改webpack.prod.conf.js文件

const version = new Date().getTime();output: {path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js'),chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js')}

优化版:

const date = new Date();const version = moment(date).format('YYYYMMDDHHmmssSSS'); // 打包时候的版本号const timestamp = date.getTime(); // 时间戳output: {path: config.build.assetsRoot,filename: utils.assetsPath(`js/[name].[chunkhash:8].${version }.js?_t=${timestamp }`),chunkFilename: utils.assetsPath(`js/[name].[chunkhash:8].${version }.js?_t=${timestamp }`)}

优化后的效果:

2、在 html 页面前面加 meta 标签。

<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"><meta name="viewport" content="width=device-width,initial-scale=1.0">

3、html 页面加载脚本的时候给脚本后面加一个时间戳,修改webpack.prod.conf.js文件。

const version = new Date().getTime();new HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',inject: true,hash: version,favicon: resolve('icon.ico'),title: 'vue-admin-template',minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true}})

vue-cli 里的默认配置,css 和 js 的名字都加了哈希值,所以新版本 css、js 和就旧版本的名字是不同的,不会有缓存问题。但是 index.html 放到服务器里去的时候,index.html 在服务器端可能是有缓存的,这需要在服务器配置不让缓存 index.html。

4、nginx 配置,让 index.html 不缓存。

location = /index.html {add_header Cache-Control "no-cache, no-store";}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。