在 Nuxt/Vue 模板中更改正文样式答案

【问题标题】：Changing body styles in Nuxt/Vue template在 Nuxt/Vue 模板中更改正文样式
【发布时间】：2021-08-01 05:36:35
【问题描述】：

我正在尝试将正文样式添加到 Nuxt 中的模板，但遇到了问题。

我正在尝试使用beforeCreate 调用，但是当我这样做时，我遇到了错误：未定义文档。

我想维护 SSR。如何在 body 元素上添加样式？

<script scoped>
  export default {
    head() {
      return {
        script: [
          {
            src: '/js/vendor/jquery.min.js' 
          },
          {
            src: '/js/site.js' 
          }
        ]
        
      }
    },
    beforeCreate: function() {
        document.body.className = 'service';
    }
  }
</script>

<style scoped>
@import '~/assets/css/style.min.css';
</style>

更新

我添加了这个：

head() {
      return {
        script: [
          {
            src: '/js/vendor/jquery.min.js' 
          },
          {
            src: '/js/site.js' 
          }
        ],
        bodyAttrs: {
          class: 'service',
        }
        
      }
    }

标签确实被添加到正文中：

<body class="service" data-n-head="%7B%22class%22:%7B%22ssr%22:%22service%22%7D%7D" style="zoom: 1;">

但是，样式没有？

body.service{padding-top:80px}
body.service{font-family:'Geomanist', sans-serif;color:#000}

【问题讨论】：

可能是因为你的风格是有范围的。

标签： vue.js nuxt.js

【解决方案1】：

看来你可以加：

bodyAttrs: {
  class: 'hidden',
},

在nuxt.config.js

根据这个answer，您可以在应用程序的根目录下创建一个app.html 文件，其内容如下。我已将课程直接添加到<body>：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }} class="service">
    {{ APP }}
  </body>
</html>

【讨论】：

在没有 app.html 解决方案或使用全局解决方案的情况下添加此主体类的任何其他方式（我只希望在此视图上使用它）。
@user1072337 看到这个github.com/nuxt/nuxt.js/issues/5023，看起来你可以注册一个“插件”在window.onNuxtReady上做什么
@user1072337 还发现了这个stackoverflow.com/a/59576303/2333214
所以我添加了bodyAttrs，但样式仍然没有添加？

【解决方案2】：

我认为处理此问题的最佳方法是使用 nuxt 布局 (https://nuxtjs.org/docs/2.x/directory-structure/layouts/)。基本上，您可以在布局文件（也是一个 vue 文件）的 style 部分定义您的全局 html 或正文样式，然后将该布局用于您的页面 (https://nuxtjs.org/docs/2.x/components-glossary/pages-layout/)

【讨论】：