总结一下nuxt3踩过的坑

本文不对nuxt3的使用做介绍，只分享踩过的坑。

关于nuxt3的更新

nuxt3的更新迭代速度可谓是非常的快，从github的commit提交中可以看到，nuxt3日更10多次都是常态。

在nuxt3中使用组件库

因为TimeMailer时光邮局一开始使用的是腾讯开发的TDesign组件库，但根据我个人使用发现，它对nuxt3 SSR渲染并不友好，并且存在bug，所以我选择了优化更好的element-plus。

那么如何在nuxt3项目中使用element-plus呢：

首先根据element-plus官方文档中的安装正常操作

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

然后在nuxt3根项目中创建plugins文件夹，新建一个element-plus.js，输入一下代码：

// plugins/element-plus.js

import { defineNuxtPlugin } from '#app'
import ElementPlus from 'element-plus'
import { ID_INJECTION_KEY } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

import 'element-plus/dist/index.css'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(ElementPlus, {
    locale: zhCn,
  })

  nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
    prefix: 100,
    current: 0,
  })
})

代码中添加了element-plus中文包，如果不需要删除第四行，删除第10行,{locale: zhCn,}即可

修改nuxt.config.ts文件，添加：

//  nuxt.config.ts
plugins: [
    {
      src: '~/plugins/element-plus.js',
    },
  ],

关于组件库SSR渲染问题

在使用element-plus组件库中，我发现了el-button、el-form、el-tag这几个组件都是不支持的SSR渲染的，剩余组件未知，自行测试

使用在这几个组件，在yarn dev开发环境是，没有问题，但是一旦yarn build，部署到生产环境后，进入页面便会提示500

解决办法：使用
标签包裹不兼容的组件，使其在客户端进行渲染。

关于项目部署的问题

部署nuxt3项目需要使用node .output/server/index.mjs命令

注：该命令不绝对，已当前路径为准。

如果要使用pm2 start，需要创建一个ecosystem.config.js，并且填写：

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

官网文档地址：https://v3.nuxtjs.org/guide/deploy/node-server