Vue项目部署,清理缓存方式(亲测有效)

文章目录
前言
一、根目录index.html
二、配置vue.config.js
1.直接上代码【使用时间戳】
总结
前言
部署前端项目以后,你会发现一个问题(为什么必须刷新页面,页面才会更新到最新版本),其实就是因为服务器缓存的问题,接下来我就以我自己所用的方案来解决自动清除缓存的问题。

一、根目录index.html
在head标签中,加入下面的代码

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

二、配置vue.config.js
1.直接上代码【使用时间戳】
代码如下(示例):

const Version = new Date().getTime()

module.exports = {
	css: {
	    loaderOptions: {
	      sass: {
	        data: `@import "@/components/themes/_handle.scss";`
	      }
	    },
	    // 是否使用css分离插件 ExtractTextPlugin
	    extract: {
	      // 修改打包后css文件名
	      filename: `static/css/[name].${Version}.css`,
	      chunkFilename: `static/css/[name].${Version}.css`
	    }
	 },
	 configureWebpack: {
		 output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
		      // filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
		      // chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
		      filename: `static/js/[name].${Version}.js`,
		      chunkFilename: `static/js/[name].${Version}.js`
		    }
	},
	chainWebpack(config) {
		// img的文件名修改
	    config.module
	      .rule('images')
	      .use('url-loader')
	      .tap(options => {
	        options.name = `static/img/[name].${Version}.[ext]`
	        options.fallback = {
	          loader: 'file-loader',
	          options: {
	            name: `static/img/[name].${Version}.[ext]`
	          }
	        }
	        return options
	      })
	}
}

总结
以上就是今天要讲的内容,有效的解决了部署以后自动更新缓存的问题,不需要在手动刷新页面去更新。

  • 4
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值