Vue2 生产环境部署 - 如何清除浏览器缓存

在生产环境部署 Vue2 项目后，可以通过以下几种方式清除浏览器缓存：

1. 使用版本号：在 Vue 项目的 index.html 文件中，可以在引入 CSS 和 JS 文件的链接后面加上版本号，如：

<link rel="stylesheet" href="css/style.css?v=1.0">
<script src="js/app.js?v=1.0"></script>

每次更新版本后，只需修改版本号即可强制浏览器重新加载文件。

2. 设置 HTTP 响应头：在服务器端设置 HTTP 响应头，告诉浏览器不要缓存页面，如：

app.use(function(req, res, next) {
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');
  next();
});

这样，在每次请求页面时，浏览器都会重新请求服务器获取最新的页面。

3. 使用 Webpack 的 Hash：在 Webpack 打包时，可以使用 Hash 生成唯一的文件名，如：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash].js'
}

每次打包后，文件名会自动加上一段 Hash 值，从而强制浏览器重新加载文件。