Hybrid H5在部分android（例如oppo）手机上，会有发布新H5后，打开H5页面有点击报错或白屏问题，这类问题通常是由于手机本地缓存导致，可以在设置中强制执行清理数据或缓存，或者在H5中增加如下配置：
vue3+vite配置
- 在vite.config.js中配置注入代码
plugins: [
{
name: 'inject-version',
transformIndexHtml(html) {
return html.replace('<head>', `<head>\n <meta name="app-version" content="${APP_VERSION}">`);
},
}
]
- 在index.html head中配置
// 脚本必须在任何资源加载前运行！
<script>
(function () {
const CURRENT_VERSION = document.querySelector('meta[name="app-version"]')?.content || 'unknown';
const LAST_VERSION = localStorage.getItem('appVersion');
if (LAST_VERSION && LAST_VERSION !== CURRENT_VERSION) {
// 版本变化：清理缓存 + 刷新
localStorage.clear();
localStorage.setItem('appVersion', CURRENT_VERSION);
window.location.href = window.location.href.split('?')[0] + '?t=' + Date.now();
} else {
// 首次访问或版本一致
localStorage.setItem('appVersion', CURRENT_VERSION);
}
})();
</script>
vue2+webpack配置
- 在vue.congig.js中配置注入代码
// 读取version
const { version } = require('./package.json')
chainWebpack: config => {
config.plugin('html').tap(args => {
// args[0]：传给new HtmlWebpackPlugin(options)的options
args[0].meta = {
...args[0].meta, // 保留原有 metas
'app-version': {
name: 'app-version',
content: version
}
}
return args
})
}
- 在index.html中配置
// 脚本必须在任何资源加载前运行！
<script>
(function () {
const CURRENT_VERSION = document.querySelector('meta[name="app-version"]')?.content || 'unknown';
const LAST_VERSION = localStorage.getItem('appVersion');
if (LAST_VERSION && LAST_VERSION !== CURRENT_VERSION) {
// 版本变化：清理缓存 + 刷新
localStorage.clear();
localStorage.setItem('appVersion', CURRENT_VERSION);
window.location.href = window.location.href.split('?')[0] + '?t=' + Date.now();
} else {
// 首次访问或版本一致
localStorage.setItem('appVersion', CURRENT_VERSION);
}
})();
</script>
注意
每次发布H5记得更新配置的版本号，如果麻烦，可以在版本号增加时间戳也行
