webpack项目和vue项目发布，浏览器存在缓存-Toy模板网

这篇具有很好参考价值的文章主要介绍了webpack项目和vue项目发布，浏览器存在缓存。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目是webpack搭建的每次发步到线上，经常需要手动清楚浏览器缓存才能有效果。vue项目设置在最下面

项目打包的js（css也是一致）名称都采用哈希值
webpack项目和vue项目发布，浏览器存在缓存,webpack,缓存,前端
问题：哈希值在有些情况下打包会不变，导致浏览器使用自己缓存的资源

解决：每次打包出来增加时间戳每次打包后的js名称都不一致

1.js处理每个项目的打包逻辑都不一样，根据package.json中的打包指令找到执行的文件修改 static是本地静态资源的文件夹

let time = new Date().getTime()
output: {
    path: config.build.assetsRoot,
    filename: `static/js/[name].[chunkhash:8].${time}.js`,
    chunkFilename:`static/js/[name].[chunkhash:8].${time}.js`
  },

webpack项目和vue项目发布，浏览器存在缓存,webpack,缓存,前端

2.css处理可以使用css分离插件 MiniCssExtractPlugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins:[
new MiniCssExtractPlugin({
      filename: `static/css/[name].[contenthash:8].${time}.css`,
      chunkFilename:  `static/css/[name].[contenthash:8].${time}.css`,
    }),
]

打包结果

webpack项目和vue项目发布，浏览器存在缓存,webpack,缓存,前端

测试
打开线上环境发现资源是缓存的从network webpack项目和vue项目发布，浏览器存在缓存,webpack,缓存,前端

然后我们发布下
webpack项目和vue项目发布，浏览器存在缓存,webpack,缓存,前端

vue项目处理其实一样，改打包输出的名字
vue.config.js文章来源地址https://www.toymoban.com/news/detail-563181.html

time 时间戳
  
module.exports = {
	configureWebpack: {
    output: {
      filename: `js/[name].${time}.js`,
      chunkFilename: `js/[name].${time}.js`,
     
    },
    
  },

 chainWebpack: config => {
		config.plugins.delete("prefetch");
    config.plugin("extract-css").tap((args) => [
      {
        filename: `css/[name].${time}.css`,
        chunkFilename: `css/[name].${time}.css`,
      },
    ]);

	}


}

到了这里，关于webpack项目和vue项目发布，浏览器存在缓存的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！