美文网首页
解决Vue 项目打包上线后客户端缓存的问题

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

作者: 纱云 | 来源:发表于2024-04-29 13:35 被阅读0次

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

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/wgitfjtx.html