Nuxt项目如何为每个页面设置独立的专属body背景图

之前尝试无效的核心原因 #

• 带scoped属性的样式块会给所有选择器自动拼接当前组件的唯一标识属性，原本写的body { ... }会被编译成类似body[data-v-xxxx]的选择器，而body标签本身不会携带组件的scoped属性标记，所以样式完全匹配不到，自然被浏览器忽略。
• 去掉scoped属性写的body样式没有作用域隔离，所有页面的这类样式会被全局加载，最终生效的永远是最后加载的那套规则，没办法实现逐页面独立的效果。

可直接复用的解决方案 #

方案1：用深度选择器穿透scoped限制，定向设置当前页面的body样式 #

在每个页面的带scoped的样式块里，通过框架提供的深度穿透语法选中body标签编写样式，不会破坏原有的样式隔离逻辑：

• Vue2 可使用 /deep/ body { ... } 或 ::v-deep body { ... }
• Vue3 可使用 :deep(body) { ... }

示例代码（以Vue3为例）：

<!-- 首页组件 -->
<template>
  <div class="home-container">页面内容</div>
</template>

<style scoped lang="scss">
:deep(body) {
  background-image: url('../../static/background-home.png');
  background-color: $darkPurple;
  background-repeat: no-repeat;
}
</style>

这种写法的效果是：只有当前页面组件挂载的时候，对应的body背景规则才会生效，页面切走、组件被卸载后，当前的背景规则会自动失效，不会和其他页面的样式串扰。

方案2：动态切换body的类名，统一集中管理所有背景规则 #

适合页面数量多、背景配置复杂的场景，维护成本更低：

1. 在全局app.scss中定义每个页面对应的独立背景类，不要直接把规则写在裸body选择器上：

   /* 全局定义所有页面的背景规则 */
   .bg-home {
     background-image: url('../../static/background-home.png');
     background-color: $darkPurple;
     background-repeat: no-repeat;
   }
   .bg-product-detail {
     background-image: url('../../static/background-detail.png');
     background-color: #1a1a2e;
     background-repeat: no-repeat;
   }
   

2. 在每个页面的生命周期逻辑中，挂载时给body添加对应页面的背景类，卸载时移除该类，避免类名残留：
   以Vue3组合式API为例的示例代码：

   import { onMounted, onUnmounted } from 'vue'
   
   onMounted(() => {
     document.body.classList.add('bg-home')
   })
   onUnmounted(() => {
     document.body.classList.remove('bg-home')
   })
   

实用避坑提示 #

• 不要把各页面的body背景规则写在无scoped的全局样式块里，这类没有作用域的样式会被浏览器一次性全量加载，后加载的规则会直接覆盖前面的，完全无法实现逐页面独立的效果。
• 如果之前尝试给布局包裹元素加背景没达到预期，本质原因是html和body没有设置100%视口高度的前提下，内部包裹元素的背景无法覆盖滚动超出视口的区域，背景规则最终必须落到body标签上，才能完全覆盖整个页面的浏览视口。

内容的提问来源于stack exchange，提问作者Marnix Elling