Vue进阶（幺捌柒）浏览器缓存问题解决_vue 浏览器缓存

在Vue应用中，浏览器缓存可能会导致一些问题，特别是在更新了应用的某些资源（如JavaScript、CSS文件）后。为了确保用户总是加载最新的资源，我们可以在Vue项目的webpack配置中添加一些特殊的hash来避免缓存问题。

以下是一个简单的例子，展示了如何在Vue CLI生成的项目中解决这个问题：

1. 修改vue.config.js文件（如果项目中没有这个文件，你需要手动创建它）。

module.exports = {
  chainWebpack: config => {
    // 对于生产环境，注入环境变量
    if (process.env.NODE_ENV === 'production') {
      // 为JS和CSS文件增加hash，避免缓存
      config.output.filename('js/[name].[contenthash:8].js').end();
      config.output.chunkFilename('js/[name].[contenthash:8].js').end();
      config.plugin('extract-css').tap(() => [{
        filename: 'css/[name].[contenthash:8].css',
        chunkFilename: 'css/[name].[contenthash:8].css'
      }]);
    }
  }
};

2. 确保你的Vue组件模板中没有使用到静态的<script>或<link>标签来引入资源，这样可以确保webpack在构建时能正确处理这些资源。

通过以上配置，每次构建时，webpack会为你的JavaScript和CSS文件生成一个独特的hash，这样浏览器就会在每次服务器请求时加载新的资源，从而避免了缓存问题。