记录下使用nuxt3开发H5的坑，包含非nuxt3问题。
二次刷新
开发过程中发现渲染页面存在客户端二次渲染的情况（服务端返回的页面在客户端渲染后会瞬间白屏重现渲染），在复制项目不断删除文件测试后发现是layout的锅，页面中并没用用到layout，但初始化项目时创建了基础的layout文件，删除该文件夹即可。
内存泄漏
部署到服务端后，隔段时间项目就会停止运行，查找问题发现是内存泄漏，后在网上查找排查方式：排查 Nuxt.js服务器端内存泄漏问题，经过查找，项目中使用了mitt且在setup下直接初始化监听等导致，放入onMounted后解决。
兼容性问题
经测试发现，在移动端不同手机平台默认浏览器，存在样式兼容性问题
<ClientOnly></ClientOnly>包裹的内容在部分浏览器不显示，需要删除并额外解决水合错误；
需要点击图片额外进行交互的操作不要直接使用img标签展示图片，防止部分app内的webview（如百度app）点击会自动查看大图，请使用background-image；
下面的情况在部分默认浏览器存在问题（OPPO），即当show为false且排版为竖排时，card1和card3中间并没有margin距离，要统一使用margin-top（真是莫名其妙）
<div class="card1" style="margin: 24px 0 12px;">
...
</div>
<div class="card2" v-if="show">
...
</div>
<div class="card3">
...
</div>
100vh高度不稳定，部分浏览器的地址栏/工具栏会遮挡，使用innerHeight：
/composables/usePageHeight.ts
export const usePageHeight = () => {
const height = ref(0)
onMounted(() => {
height.value = window.innerHeight
window.addEventListener('resize', () => {
height.value = window.innerHeight
})
})
return height
}
header
页面header修改，/server/middleware/addHeaders.ts
export default defineEventHandler((event) => {
appendHeader(event, 'Cross-Origin-Opener-Policy', 'same-origin')
appendHeader(event, 'Cross-Origin-Embedder-Policy', 'require-corp')
})
public下的资源header修改，/server/plugins/addHeaders.ts
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook("beforeResponse", (event) => {
const res = event.res
res.setHeader("Cross-Origin-Opener-Policy", "same-origin")
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp")
});
})
