前言

最近在用Nuxt3，从0-1写公司的项目，分享一下Nuxt3中的一些坑，持续更新~

Nuxt3

开源的高性能混合型 Vue 框架。

开发更快
打包更小
支持 vite
支持 vue3
支持自动引入
支持文件路由
支持布局系统
支持多种渲染模式
支持 typescript
支持 composition-api

项目setup

“坑”点

tailwindcss HRM热更新失效问题

修改了class，比如text-xl改成text-5xl，HRM后不更新，刷新页面也不生效，只能重新编译整个项目才生效。

相关issue。原因是vite 在 tailwindcss JIT mode按需编译导致的问题，

解决

因为这问题很影响开发效率，在没有其他解决方案下，只能选择关闭tailwindcss JIT mode，但骚就骚在，tailwindcss v3版本只支持JIT mode，当然也有办法，曲线救国一下：以cdn的方式全量引入

因此在dev开发环境中，以cdn的方式全量引入；build构建时候则按需构建即可，只需要修改一下nuxt.config.ts文件

// nuxt.config.ts
const isDev = process.env.npm_lifecycle_event === 'dev';

{
  meta: {
    script: [
      isDev && {
        src: 'https://cdn.tailwindcss.com'
      }
    ]
  }
}

::v-deep使用

WARN [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated.

解决：

<style lang="scss" scoped>
:deep(.el-input__inner) {
  @apply rounded-2xl border-r-0 rounded-r-none h-12;
}
:deep(.el-button) {
  @apply rounded-2xl border-l-0 rounded-l-none h-12;
}
</style>

build 构建时，出现hoist @charset的报错

原因是vite在打包css时，对多个css文件的@charset没有进行合并，而vite很快呀！马上就修复这个问题，并发布新版本fix(css): hoist charset #7678，而Nuxt3依赖的vite-builder也随即更新了版本，因此这问题就自然而然的解决了，升级版本就行。

ElementPlus无法按需引入？

在Nuxt3中暂不支持import on demand（👁有小伙伴有解决方案吗？）

持续更新~~

小伙伴们踩到的坑！力求在评论区补充！！

一起来踩Nuxt3的”坑“吧

前言