我正试图在Nuxt中的模板中添加主体样式，但遇到了问题。
我正试图使用beforeCreate调用，但当我这样做时，我遇到了错误：文档未定义。
我想保持SSR。如何在车身元素上添加造型？
<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}
我认为处理这一问题的最佳方法是使用nuxt布局(https://nuxtjs.org/docs/2.x/directory-structure/layouts/)。基本上，您可以在布局文件(也是一个vue文件(的stylesecion中定义全局html或body样式，然后将该布局用于页面(https://nuxtjs.org/docs/2.x/components-glossary/pages-layout/)
似乎可以添加：
bodyAttrs: {
class: 'hidden',
},
在nuxt.config.js中
根据这个答案，您可以在应用程序的根目录下创建一个具有以下内容的app.html文件。我已经将类直接添加到<body>:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }} class="service">
{{ APP }}
</body>
</html>