uniapp打包H5的时候清楚缓存（不安装依赖的前提下）

news2025/1/9 5:52:16

问题

在写项目的时候，打包好一个H5 发布成功，后来又重新打包新的包进行更新迭代，但是用户手机上还是上一个版本，本地缓存还是没有清除。

解决问题

步骤一：html不缓存

在html中，解决缓存的方法主要是依赖以下标签的属性：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

这几个标签是什么意思呢：

这几个标签的作用是禁用浏览器缓存，确保每次访问页面时都从服务器加载最新的内容。具体解释如下：

（1）<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />：
		这个标签设置了HTTP响应头中的Cache-Control属性，告诉浏览器不要缓存页面的任何部分，包括图片、脚本等。同时，要求浏览器在每次请求时都必须向服务器验证资源的新鲜度。
（2）<meta http-equiv="Pragma" content="no-cache" />：
		这个标签设置了HTTP响应头中的Pragma属性，它与Cache-Control类似，但主要用于HTTP/1.0协议。同样表示不缓存页面的任何部分。
（3）<meta http-equiv="Expires" content="0" />：
		这个标签设置了HTTP响应头中的Expires属性，它指定了页面的过期时间。设置为0表示页面立即过期，即每次都需要重新从服务器获取。

综合这三个标签，可以确保浏览器不会缓存页面的任何内容，从而确保用户总是看到最新的页面内容。

所以要保证打包时候生成的html具备这几个标签，就能保证用户每次请求的都是服务器是上最新版本的html文件
uniapp官方提供了一个东西叫做：index.html模板
就在manifest.json =>> web配置 =>> index.html模板路径：
在这里插入图片描述
在manifest.json同级目录下创建一个名为：template.h5.html 的文件
文件内容如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- 由于自定义了meta标签想要实现自动化打包添加该标签，需要添加自定义html模板 -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 这个标签设置了HTTP响应头中的Cache-Control属性，告诉浏览器不要缓存页面的任何部分，包括图片、脚本等。同时，要求浏览器在每次请求时都必须向服务器验证资源的新鲜度。 -->
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<!-- 这个标签设置了HTTP响应头中的Pragma属性，它与Cache-Control类似，但主要用于HTTP/1.0协议。同样表示不缓存页面的任何部分。 -->
        <meta http-equiv="Pragma" content="no-cache" />
		<!-- 这个标签设置了HTTP响应头中的Expires属性，它指定了页面的过期时间。设置为0表示页面立即过期，即每次都需要重新从服务器获取。 -->
        <meta http-equiv="Expires" content="0" />
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <!-- <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript> -->
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

打包以后的index.html文件如下所示：已经包含了刚刚说的三行代码 在这里插入图片描述

步骤二：js不缓存

步骤一是解决了html不缓存的问题，但是解决不了js缓存的问题，就需要使用vue的打包机制来解决问题了。

vue.config.js文件是Vue项目的配置文件，用于自定义项目的配置选项。在这个文件中，你可以设置各种与构建、开发和部署相关的配置项，例如：

（1）修改webpack配置：可以对webpack进行个性化配置，如修改入口文件、输出目录、插件等。
	（2）开发服务器配置：可以配置开发服务器的端口号、代理设置等。
	（3）生产环境优化：可以开启代码压缩、分割等优化选项。
	（4）单元测试配置：可以配置单元测试工具（如Jest）的相关选项。
	（5）集成第三方库或插件：可以添加一些第三方库或插件的配置信息。
总之，vue.config.js文件可以让你更灵活地控制Vue项目的构建和运行过程。

所以，再项目的根目录下面创建一个vue.config.js文件：具体代码如下：

let filePath = '';   // 默认文件路径
let TimeStamp = '';  // 时间戳
let Version = '-V1.0.0-'; // 版本号
//编译环境判断，可以根据不同环境来做相应的配置
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'static/js/'
  TimeStamp = new Date().getTime();
  process.env.VUE_APP_INDEX_CSS_HASH=`${Version}${TimeStamp}`   //给css文件也使用该时间戳
}
 
module.exports = {
  configureWebpack: {
    output: { //重构文件名
      filename: `${filePath}[name].${Version}${TimeStamp}.js`, // index文件重命名为带有版本号+时间戳的格式
      chunkFilename: `${filePath}[name].${Version}${TimeStamp}.js` // static/js/pages-home-index.-V1-754654657.js  
    },
  },
}