天天看點

VUE更新版本浏覽器緩存問題

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')
}
           

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";

}

其他解決方案:https://www.jianshu.com/p/e295f8d1cf70

可以逐個進行嘗試

vue