解决Vue 项目打包上线后客户端缓存的问题

1.文件名哈希化

module.exports = {
  // ...
  output: {
    filename: '[name].[contenthash].js',
    // ...
  }
};

2.缓存控制：通过服务器配置

// Express.js 示例
app.use(express.static('dist', {
  etag: false,
  lastModified: false,
  setHeaders: function(res, path) {
    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
    res.setHeader('Expires', '0');
  }
}));

3.版本控制：在Vue项目的入口文件（通常是main.js）中，可以添加一个版本号或时间戳作为查询参数，以确保每次更新后，浏览器都会重新下载文件

// main.js
import Vue from 'vue';
import App from './App.vue';

const version = '1.0.0'; // 更新后修改版本号

new Vue({
  render: h => h(App),
}).$mount('#app?v=' + version);