饕餮ing 2023-07-05 09:13 采纳率: 100%
浏览 42
已结题

vue打包部署，浏览器缓存问题访问旧的版本

vue项目打包部署后，用浏览器访问，如果更新迭代后再次打包部署，浏览器访问的可能还是之前版本的vue页面，就是说浏览器后缓存的问题，清空缓存是可以决定问题，但是是否可以在代码层面解决问题呢？

  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-07-08 18:16
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:
    • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7756753
    • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue - 网站接入微信扫码登录功能详细教程，完整详细流程及完整功能示例源代码（附常见问题的解决方案与二维码样式修改方案）
    • 除此之外, 这篇博客: 【Vue复习】Vue面试题收记录中的 数据更新视图没更新，这说明是vue并未检测到属性的改变，如果是对象那么可能是直接新增或者是删除了属性，或者是数组，或者数据不是响应式的，vue不能检测数组直接通过索引修改数组项 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

      那是vue的域更新是异步的，因为即当setter操作发生后，并不会立马更新，指令的更新操作会有延迟，当指令更新真正执行的时候，此时修改的属性属性已经设置，所以指令更新模板时得到的是新值。

    • 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇课程中的 改变上面例子需求，增加逻辑判断 小节, 巩固相关知识点
    • 以下回答来自chatgpt:

      对于Vue项目中浏览器缓存导致访问旧版本页面的问题，可以通过以下方式解决：

      1. 使用文件版本号：

      在Vue项目的构建配置文件(vue.config.js或webpack.config.js)中，可以通过为构建文件添加版本号的方式解决缓存问题。具体步骤如下：

      • 在构建文件的output项中，将文件名改为包含带有版本号的文件名，例如：[name].[chunkhash].js。
      • 在构建文件的plugins项中，使用webpack-manifest-plugin插件生成一个文件清单，清单中包含了构建后的文件名与实际引用的路径之间的映射关系。
      • 在HTML模板文件中，使用scripts标签引用构建后的文件，在标签内使用动态生成的文件名。

      这样的话，每次构建时文件名会变化，浏览器会重新请求新的文件。

      示例代码：

      const ManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
  // ...
  output: {
    filename: '[name].[chunkhash].js',
    // ...
  },
  plugins: [
    new ManifestPlugin()
    // ...
  ],
  // ...
}
      1. 使用meta标签禁用缓存：

      在HTML模板文件中，可以通过添加meta标签来控制浏览器缓存行为。可以设置http-equiv属性为Cache-Control，值为no-cache, no-store, must-revalidate。这样每次访问页面时浏览器都会重新请求。

      示例代码：

      <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

      通过以上两种方式，可以在代码层面解决浏览器缓存导致访问旧版本页面的问题。


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 8月18日
  • 已采纳回答 8月10日
  • 创建了问题 7月5日

悬赏问题

  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证？（详解）
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥20 想用ollama做一个自己的AI数据库
  • ¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
  • ¥15 请问怎么才能复现这样的图呀