我们知道vue工程和基于vue的工程默认body会有个8px的padding,这就导致在有些情况下界面看上去丑。
vue工程中去掉默认的白边比较容易，直接修改/public/index.html 的body样式即可
<body
style="padding: 0px; margin: 0px; "> <noscript>
</noscript> <div id="app"></div> </body>
但基于vuew工程的nuxt工程如何修改呢，它里头没有index.html这个文件。
百度了很久也没找到答案，然后换成了谷歌，果然搜出一篇相关的日文博客，虽然看不懂日文，但里头的代码还是看的懂的
很快就看到一个关键字——bodyAttrs. 查了下相关资料，原来是Vue Meta 的一个配置属性。
大致弄懂了其中原理后，然后将博客中的几个关键代码提取出来,果然可以。不得不说谷歌还是好用。 代码如下:
先在nuxt.config.js中添加如下配置
export default { head: { bodyAttrs: { class: 'body-class' }, } }
然后在vue页面中添加如下样式即可:
<style lang='stylus'> .body-class { height: 100%; margin:0; padding: 0; } </style>
版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
