vue-cli创建的项目。每次上线后都得强制清除缓存才能看到最新内容解决办法

程序媛_MISS_zhang_0110

于 2024-09-25 15:23:22 发布

阅读量456

点赞数 4

分类专栏： vue-cli 文章标签： vue.js 缓存前端

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/142524669

版权

vue-cli 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vue-cli创建的项目。每次上线后都得强制清除缓存才能看到最新内容解决办法

一、vue.config.js 文件
二、public/index.html

有时前端代码上线后，用户无法获取最新的代码显示，需要清除浏览器缓存，比较麻烦。

我们可以通过给打包编译后的js文件、css文件名称添加时间戳来达到用户刷新时重新获取最新的js、css文件，进而获得最新代码

一、vue.config.js 文件

let timeStamp = new Date().getTime();

module.exports = {
    filenameHashing: false,
    configureWebpack: {
        output: {
          // 输出重构 打包编译后的js文件名称,添加时间戳.
          filename: `js/js[name].${timeStamp}.js`,
          chunkFilename: `js/chunk.[id].${timeStamp}.js`,
        },
    },
    css: {
        extract: {
          // 打包后css文件名称添加时间戳
          filename: `css/[name].${timeStamp}.css`,
          chunkFilename: `css/chunk.[id].${timeStamp}.css`,
        },
    },
}

二、public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="expires" content="0">
</html>