在Nuxt.js项目中如何移除body元素的默认内边距

核心原因排查 #

你尝试的方案无效，基本是以下几个常见原因导致：

• 页面组件的style添加了scoped属性，scoped样式仅作用于当前组件内部元素，无法命中全局的body节点
• Nuxt2的自定义模板文件名错误，仅识别根目录下的app.html，index.html不会被框架读取
• 浏览器缓存残留，修改配置后未重启开发服务、未硬刷新页面

推荐通用解决方法（适配Nuxt2/Nuxt3，优先级最高） #

通过全局样式配置实现，不会出现作用域问题：

1. 在项目assets/css目录下创建全局样式文件global.css，写入内容：

/* 可以先全局重置所有元素默认边距，也可以单独修改body */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

2. 在Nuxt配置文件中注册全局样式：

• Nuxt2 版本修改nuxt.config.js：

module.exports = {
  css: [
    '~/assets/css/global.css'
  ]
}

• Nuxt3 版本修改nuxt.config.ts/nuxt.config.js：

export default defineNuxtConfig({
  css: [
    '~/assets/css/global.css'
  ]
})

3. 重启开发服务，硬刷新浏览器后验证效果。

其他可选方案 #

Nuxt2 自定义模板方案 #

在项目根目录创建app.html，内容如下：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

Nuxt3 根组件样式方案 #

直接在项目根目录的app.vue中添加无scoped的全局样式：

<template>
  <NuxtPage />
</template>

<style>
body {
  margin: 0;
  padding: 0;
}
</style>

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