解决VUE3项目部署后存在缓存页面不更新的问题

news/2024/7/10 0:29:09 标签: 缓存, vue, 前端

方法一:

找到项目中的index.html文件,在头部加上以下代码

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

若以上代码仍不能解决问题,请使用以下两种方法。

方法二:

此方法适用于路由为hash模式的情况下

找到配置文件,在文件vue.config.js中配置filenameHashing和output。

1.filenameHashing(关闭hash命名)

2.通过output配置filename和chunkFilename之后使得打包后生成的html中引入的js地址后面有版本号,由此触发更新,版本号可以是固定值。

注意:路径的配置因项目的配置而异,不要出错!

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  publicPath: "./",
  assetsDir: 'static',
  filenameHashing: false,
  configureWebpack: {
    output: {
      filename: `static/js/[name].js?v=1`,
      chunkFilename: `static/js/[name].js?v=1`
    }
  },
})   

打包后代码和浏览器中效果如下:

方法三:

此方法适用于路由为history模式的情况下

通过时间戳配置js文件名和css文件名,使得每次打包生成的文件名不同,从而触发更新。

注意:history模式需要服务器端的支持,若服务器端不支持,会出现404的现象。

const { defineConfig } = require('@vue/cli-service')
const Timestamp = new Date().getTime();

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  publicPath: "./",
  assetsDir: 'static',
  configureWebpack: {
    output: {
      filename: `static/js/[name].${Timestamp}.js`,
      chunkFilename: `static/js/[name].${Timestamp}.js`
    }
  },
  css: { 
    extract: { 
      filename: `static/css/[name].${Timestamp}.css`,
      chunkFilename: `static/css/chunk.[id].${Timestamp}.css`,
    }
  }
}) 

以上方法效果因项目而异,要注意和其它配置项的关联。


http://www.niftyadmin.cn/n/5003689.html

相关文章

【Java】网络编程

网络编程 Socket套接字概念分类Java数据报套接字通信模型一次发送和接受UDP数据报提供多个客户端的请求处理及响应 Java流套接字通信模型Socket编程注意事项 UDP数据报套接字编程DatagramSocket API构造方法普通方法 DatagramPacket API构造方法普通方法 InetSocketAddress API…

Git常用命令用法

参考视频&#xff1a;真的是全能保姆 git、github 保姆级教程入门&#xff0c;工作和协作必备技术&#xff0c;github提交pr - pull request_哔哩哔哩_bilibili 1.Git初始化 首先设置名称和邮箱。然后初始化一下&#xff0c;然后就创建了一个空的Git仓库。 PS D:\golang\oth…

React中父子组件参数传递讲解

文章目录 结合案例&#xff1a;github搜索案例1.父容器代码2.搜索Search子模块代码3.展示Lisi子模块代码 父子参数传递分析1.子(Search)传父(App)2.父(App)传子(List) 结合案例&#xff1a;github搜索案例 案例结果展示如下图 1.父容器代码 import React, { Component } fr…

026:vue中el-progress逆向倒计时方式显示

第026个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

Jenkins搭建步骤Linux环境

1、进入目标目录开始准备环境 安装jdk 安装maven 安装tomcat 安装node 下载Jenkins.war并且拷贝进tomcat的webapp的文件夹下。 环境变量配置如下自行更改&#xff1a; #--------------For JDK---------------- export JAVA_HOME/usr/local/java/jdk1.8.0_192 export PATH/usr…

Ubuntu20 安装 带cuda的opencv遇到的问题

问题1&#xff1a; CUDA 12.2 fp16 dnn 编译错误 错误 C2666: operator !: 具有类似的转换重载函数 解决&#xff1a; CUDA 12.2 fp16 dnn compilation error Issue #23893 opencv/opencv GitHub Solution: I "solved" this by using static_cast. You want …

移动端App持续集成体系构建实战

这里写目录标题 一、目标1、前言2、优势&#xff1a;3、涉及技术点4、目标 二、测试app构建、打包过程1、安卓打包的环境要求 三、演示安卓源码打包四、演示安卓App部署1、前提条件2、命令控制apk安装与卸载 五、安卓UI自动化测试1、Appium app自动化测试-Python2、实现的验证点…

软件测试面试题汇总

测试技术面试题 软件测试面试时一份好简历的重要性 1、什么是兼容性测试&#xff1f;兼容性测试侧重哪些方面&#xff1f; 5 2、我现在有个程序&#xff0c;发现在Windows上运行得很慢&#xff0c;怎么判别是程序存在问题还是软硬件系统存在问题&#xff1f; 5 3、测试的策略…