前言

最近才发现,nuxt3项目打包后会产生两份css内容,一份是内联样式,一份是css文件样式,最终是css文件样式覆盖了内联,但是这两份样式是一模一样的,而且都是vue组件才会有这种情况,让人不得不怀疑是不是打包出现问题了。

事实上也并非如此,这是nuxt3的一个特性,且仅在使用vite的时候才会有,这个特性就是inlineStyles内联样式,这样html可以很快的渲染出东西,大概是这样一个意思。

如果你不需要,或者部分组件不需要,可以通过配置进行修改。

教程

此处内容已隐藏回复后方可阅读。

分类: nuxt 标签: 样式Nuxt3

评论

全部评论 16

  1. mcdj26
    mcdj26
    Google Chrome Windows 10
    正好在学webpack,发现我自己用nuxt做的主页出现了这个问题,然后去看了一圈,发现这个问题没那么简单[笑哭],github上一众大佬束手无策(https://github.com/nuxt/nuxt/issues/21821),最后好像是有一个插件搞定了(https://github.com/johannschopplich/nuxt-vitalizer)
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @mcdj26感觉解决方式不一样吧,他们可能希望内联开启后,不要再有一份link样式了,但是对于我而言,只要有一份就行了,无所谓是内联还是link
      1. mcdj26
        mcdj26
        Google Chrome Windows 10
        @木灵鱼儿毕竟内联样式是ssr加快页面渲染的常规操作嘛,如果还用link就显得ssr没啥意义了[喜极而泣]
        1. 木灵鱼儿
          木灵鱼儿
          FireFox Windows 10
          @mcdj26其实没啥太大提升,因为总量没有变,传统的mvc框架不都是推荐link样式,不用太纠结啦!
  2. vdvd
    vdvd
    Google Chrome Windows 10
    学习学习学习学习
  3. 图图爱学习
    图图爱学习
    Google Chrome Windows 10
    感谢作者分享[呲牙]
  4. 路过
    路过
    Google Chrome Windows 10
    了解一下吧
  5. as
    as
    Google Chrome MacOS
    振宇与语言
  6. Ban
    Ban
    Google Chrome Windows 10
    学习学习学习学习
  7. Ben
    Ben
    Google Chrome Windows 10
    [2024][脱单doge]
  8. wyf
    wyf
    Google Chrome MacOS
    学习学习学习
  9. 吖哈
    吖哈
    Google Chrome Windows 10
    学习学习学习
  10. 啥
    Google Chrome MacOS
    学习学习。

目录