总结一下nuxt3踩过的坑

博主： xiaoxiao
发布时间：2022 年 08 月 13 日
3776 次浏览
4 条评论
2175字数
分类： Vue 笔记 JavaScript 前端

# 总结一下nuxt3踩过的坑

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

## 关于nuxt3的更新

nuxt3的更新迭代速度可谓是非常的快，从github的commit提交中可以看到，nuxt3日更10多次都是常态。![image-20220813175222132](https://cdn.xxhzm.cn/xxhzm/image-20220813175222132.png)

## 在nuxt3中使用组件库

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

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

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

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

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus
```

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

```javascript
// 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文件，添加：

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

![image-20220813181037677](https://cdn.xxhzm.cn/xxhzm/image-20220813181037677.png)

## 关于组件库SSR渲染问题

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

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

![image-20220813181739518](https://cdn.xxhzm.cn/xxhzm/image-20220813181739518.png)

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

## 关于项目部署的问题

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

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

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

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

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

## 注意

**版本更新迭代速度快，一切请以官方文档为准**

**以上问题均出现在3.0.0-rc.6版本，如果出现相同问题请自行辨别**

猜你想看 Vue学习小案例 PHP获取用户的真实ip地址宝塔反向代理，自建CDN节点每日一学：PHP 中的array_pad函数详解 jQuery实现选项卡每日一学：PHP 中的array_multisort函数详解 Vue插槽每日一学：PHP 中的array_pop函数详解每日一学：PHP 中的array_merge_recursive函数详解 PHP函数的定义及使用

最后修改：2022 年 08 月 13 日

如果觉得我的文章对你有用，请随意赞赏

4 条评论

iuyyycmqvn
March 1st, 2025 at 01:39 pm

若能弱化说教语气，传播效果会更好。

回复
archzks
January 30th, 2023 at 12:06 pm

nuxt3生成二维码怎么生成，使用了vue-qr,qrcode都没反应

回复
1. xiaoxiao
  January 30th, 2023 at 12:24 pm
  
  @archzks
  
  https://api-m.com/doc/QRcode
  
  回复
2. xiaoxiao
  January 30th, 2023 at 12:24 pm
  
  @archzks
  
  库我没有使用过，我建议使用API
  
  回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

总结一下nuxt3踩过的坑

xiaoxiao • 2022 年 08 月 13 日

# 总结一下nuxt3踩过的坑

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

## 关于nuxt3的更新

## 在nuxt3中使用组件库

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

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

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

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus
```

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

```javascript
// 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文件，添加：

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

![image-20220813181037677](https://cdn.xxhzm.cn/xxhzm/image-20220813181037677.png)

## 关于组件库SSR渲染问题

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

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

![image-20220813181739518](https://cdn.xxhzm.cn/xxhzm/image-20220813181739518.png)

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

## 关于项目部署的问题

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

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

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

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

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

## 注意

**版本更新迭代速度快，一切请以官方文档为准**

**以上问题均出现在3.0.0-rc.6版本，如果出现相同问题请自行辨别**

总结一下nuxt3踩过的坑

4 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Typecho更换字体插件FontLibs

给网站更换HarmonySanc字体

主流博客系统搭建（WordPress、Typecho） - 保姆级教学

handsome美化-持续更新

cdn.xxhzm.cn 免费的静态资源加速

Vue Router 中全局守卫和组件守卫的使用方式及示例

JS点击更换图片

Go的执行原理以及Go命令

每日一学：PHP 中的array_filter函数详解

JS网页计算器

总结一下nuxt3踩过的坑

4 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

总结一下nuxt3踩过的坑

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款