以下内容为使用vue3 开发H5 中碰到的几个点，个人愚见。不定期进行补充。
框架端
1. 安装 vite插件 @vitejs/plugin-legacy 。
npm add -D @vitejs/plugin-legacy
使用：
在vite.config.js 中引入
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
// 示例
legacy({
targets: ['Chrome 63'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
modernPolyfills: true
}),
... // 其他配置
]
});
说明： 插件说明以及具体配置 戳 github
目的： 为打包后的文件提供传统浏览器兼容性支持。具体讲就是，vue3 开发的H5 如果不进行这个配置，可能会在不同版本的 iOS/Android 手机上出现打开页面，但是空白的情况。
2. 调试使用 vConsole
npm install vconsole
使用：
在项目的 main.js 中引入
import Vconsole from 'vconsole'
const vConsole = new Vconsole()
说明： 插件地址 vConsole README_CN
引用后页面上会出现一个绿色的 vConsole 按钮。（如果开发过小程序的话，对这个页面会感到非常熟悉）
实际开发中，在 new Vconsole() 时，应当根据环境进行。保证不在生产环境出现调试按钮 。
必须要在生产环境debug的话，那有这个就非常不错了
目的： 可以在真机运行时，进行调试，查看相关 打印和请求等报错。方便调试。
代码层面
1. meta 标签的设置
使用：
在html 文件中，添加
<meta
name="viewport"
id="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover" />
说明：
| key | 说明 |
|---|---|
| user-scalable | 是否允许缩放 |
| initial-scale | 初始倍数 |
| maximum-scale | 最大倍数 |
| minimum-scale | 最小倍数 |
建议在真机中，对上述的属性进行修改并且查看效果。可以更好的理解。
最重要的是 viewport-fit=cover 属性。
实际的工作中，部分H5页面是在原生app中打开，为了H5完成展示和交互体验，一般会将WebView全屏展示H5。这时候，因为H5需要考虑头部的留海和底部的切换区域，所以一般会使用定位属性进行布局。因为原生的webview有内置的安全距离属性，如果没有添加viewport-fit=cover 的话，比如在设置top:0时，定位的元素会直接到导航栏位置。反正，添加了之后，会出现在留海下方，也就是安全区域顶部的起始点。（具体了解 可见 安全区域）
目的： H5 页面，顶部和底部布局时配合 safe-area-inset-XXXX 可以做到几行代码兼容大部分机型的布局。
2. H5 标签添加点击态
使用：
在html 文件中的 body标签上，添加 ontouchstart=""
<body ontouchstart="">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
说明：
在写常规的web端页面时，我们直接是对需要点击的标签添加 active 伪类来实现点击态效果（就是点一个标签的时候，标签的样式进行变化）。
但是同样的写法，放到H5 的时候发现无效。实际并不是点击事件未触发，而是在移动端上 触屏事件是touch 触发的。
目的： 使用了上述方法后，就可以正常的使用 active伪类 了。
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
