钉钉h5微应用缓存可行性解决方法_钉钉h5如何刷新缓存

最近有在开发钉钉h5微应用程序，坑爹的钉钉h5即使打包js做了hash串 每次打包上线依然会读取缓存。要手动清除掉手机里应用的缓存信息才可以读取最新的代码，这么做的话 用户体验着实太糟糕了。
百度了下说是在入口引用js后面加上版本号就能不读取缓存，ok 那想办法每次打包去更新版本号就好了。

要每次去更新版本号，那必然要用到node的fs模块来读写文件，开搞：
所有的环境变量文件里声明一个版本号

根目录新建一个js文件update.version.js
引入文件操作模块和路径模块以及获取当前版本号

const fs = require('fs');
const path = require('path');

const version = process.env.VUE_APP_VERSION;
1
2
3
4

声明一个函数

function changeVersion() {
	// 执行函数
}
1
2
3

判断当前环境是正式环境执行更新版本号操作

function changeVersion() {
	if (process.env.NODE_ENV === 'production') {
	    const _v = version.split('.').map(Number);
	    // 确定版本号
	    if (_v[2] < 10) {
	      _v[2]++;
	    } else {
	      if (_v[1] < 10) {
	        _v[1]++;
	        _v[2] = 0;
	      } else {
	        _v[0]++;
	        _v[1] = 0;
	        _v[2] = 0;
	      }
	    }
	    // 修改版本号
	    // 同步读文件
	    const file = fs.readFileSync(
	      path.join(__dirname, '.env.production'),
	      'utf-8'
	    );
	    // 需要更新的数据 由于本人reg实在是太差 正则写不来orz
	    const V = `VUE_APP_VERSION = ${_v.join('.')}`;
	    // 当前的数据
	    const nowV = `VUE_APP_VERSION = ${version}`;
	    // 替换数据 正则大佬可以直接在这里配置修改 不需要单独声明变量来替换
	    const result = file.replace(nowV, V);
	    // 同步写文件
	    fs.writeFileSync(path.join(__dirname, '.env.production'), result, 'utf-8');
	    return _v.join('.');
	 } else {
	 	return version
	 }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

别忘了把该函数导出

module.exports = changeVersion;
1

这样我们就做到了更新版本号文件的功能，接下来拿导出的版本号放到js文件路径上;
在vue.config.js文件上：

const changeVersion = require('./update.version');

const version = changeVersion();
1
2
3

module.exports里的chainWebpack配置项上添加config.output.filename

  chainWebpack: (config) => {
    // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'));
    config.plugin('html').tap((args) => {
      args[0].title = '';
      return args;
    });
    // 给js添加hash和版本号
    config.output.filename(`[name].[hash].js?version=${version}`).end();
  },
1
2
3
4
5
6
7
8
9
10
11
12

现在就可以每次打包先调用nodejs修改版本文件并获取最新的版本号添加到入口文件上;

完美解决

---

突然发现公司是jenkins自动部署的，自动部署 意味着每次都是拉git最新的代码来安装打包，打包后并不会把更新的版本号push到git去啊，那它下次还是读取的旧版本号啊喂，，，，

该方法貌似只适合手动部署！！