0
点赞
收藏
分享

微信扫一扫

vue打包上线并清除缓存机制

天涯学馆 2022-03-24 阅读 73
前端vue

第一步,html增加meta标签

	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

第二步,修改打包之后的js、css、image的命名规则

在vue.config.js种修改配置

	const Timestamp = new Date().getTime()
	module.exports={
		filenameHashing: false,// 此步骤可省略。
		configureWebpack: config => {
	        // 打包编译后修改 js 文件名
	        config.output.filename = `assets/js/[name].${Timestamp}.js`;
	        config.output.chunkFilename = `assets/js/[name].${Timestamp}.js`;
	    },
	    css: {
	        extract: {
	            // 打包编译后修改 css 文件名
	            filename: `assets/css/[name].${Timestamp}.css`,
	            chunkFilename: `assets/css/[name].${Timestamp}.css`
	        }
	    }
	}

第三步,修改nginx配置,不缓存页面

server {
    location / {
        add_header Cache-Control no-store;
        add_header Pragma no-cache;
    }
}
举报

相关推荐

0 条评论