使用vue3 开发H5 ，需要注意的部分点

以下内容为使用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" />

说明：

建议在真机中，对上述的属性进行修改并且查看效果。可以更好的理解。
最重要的是 viewport-fit=cover 属性。
实际的工作中，部分H5页面是在原生app中打开，为了H5完成展示和交互体验，一般会将WebView全屏展示H5。这时候，因为H5需要考虑头部的留海和底部的切换区域，所以一般会使用定位属性进行布局。因为原生的webview有内置的安全距离属性，如果没有添加viewport-fit=cover 的话，比如在设置top:0时，定位的元素会直接到导航栏位置。反正，添加了之后，会出现在留海下方，也就是安全区域顶部的起始点。（具体了解 可见 安全区域）

目的： H5 页面，顶部和底部布局时配合 safe-area-inset-XXXX 可以做到几行代码兼容大部分机型的布局。