Hybrid H5在部分android（例如oppo）手機上，會有發(fā)布新H5后，打開H5頁面有點擊報錯或白屏問題，這類問題通常是由于手機本地緩存導致，可以在設(shè)置中強制執(zhí)行清理數(shù)據(jù)或緩存，或者在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>
注意
每次發(fā)布H5記得更新配置的版本號，如果麻煩，可以在版本號增加時間戳也行
