Nuxt3稳定版发布了，记录一下遇到的问题和解决方案

Nuxt3作为Vue生态圈最晚适配Vue3的框架，这一点甚至被尤大点名过，个人认为在技术选型时Nuxt的优先级应该放低一点。不过既然Nuxt3的稳定版出来了，我还是愿意一探究竟，记录一下遇到的问题和经验。

引入iconfont

在nuxt.config.ts中添加配置

export default defineNuxtConfig({
  ……
  app: {
    head: {
      script: [
        // <script src="./assets/styles/fonts/iconfont.js"></script>
        { src: '_nuxt/assets/iconfont/iconfont.js', type: 'text/javascript' },
      ],
      link: [
        // <link rel="stylesheet" href="./assets/styles/fonts/iconfont.css">
        { rel: 'stylesheet', href: '_nuxt/assets/iconfont/iconfont.css' },
      ],
    },
  },
  
  ……

/assets/iconfont部分为你项目中iconfont文件所在路径

引入vant

在nuxt.config.ts中添加配置

  // experimental features
  experimental: {
    externalVue: true, // 添加这一行
  },

在plugins文件夹下添加文件vant.js

import { defineNuxtPlugin } from '#app'
import { Tabbar, TabbarItem } from 'vant'

// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
import 'vant/lib/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Tabbar).use(TabbarItem) // 添加用到的组件
}

这样配置后页面中就可以使用vant组件了

vant组件适配手机安全区

在nuxt.config.ts中添加meta信息

        {
          name: 'viewport',
          content:
            'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover',
        },

在需要适配安全区的组建里添加对应属性，顶部安全区属性是safe-area-inset-top，底部安全区属性是safe-area-inset-bottom 示例：

<van-nav-bar safe-area-inset-top />

<van-tabbar safe-area-inset-bottom>
</van-tabbar>

IOS端H5布局适配安全区

当给页面容器设置height: 100vh，会发现是把底部安全区也覆盖了，但实际我们希望布局不会影响到安全区，那么就需要在css中配置了
constant和env只有在viewport-fit=cover时候才能生效，所以nuxt.config.ts配置同上一节，css配置如下

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */

类似的属性还有三个：safe-area-inset-top、safe-area-inset-left、safe-area-inset-right，这4个属性在横屏竖屏的值不一样，可根据实际场景用@media进行判断。