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