nuxt下运行项目时内存溢出的一种情况

Posted 2020-11-21 xinyan-666

话不多说直接上代码：

如图，点红点的三行引入了一个组件，内容是同意注册协议的弹窗。但是在run dev的时候提示说内存溢出了（out of memory）...经过多方排查，定位到这个组件，警察叔叔就是他！

组件的内容非常简单，总共不到70行代码，就不再贴了。先删掉了js，生命周期，methods，watch删的干干净净；又开始删template，只剩下一个<p>111</p>；css没有动，它还能出什么幺蛾子？但是还是报错啊！后来同事猜测说就是css的问题：我们的弹窗使用了element UI，为了覆盖它的样式，有几行代码是这么写的：

问题就出在这个deep上面！之前在网上看到有一种覆盖element样式的写法：

• 父组件cssName+ /deep/+第三方库需要更改的cssName
• 例如 .parentCssName /deep/ .libCssName{}

但是我没有采用这种方式，而是把所有需要覆盖的样式写在了el_cover.css这个文件中。这个组件不是我写的，同事和我用的不是同一个方法。如果我们统一标准的话就不会出现这个问题了，但是反过来想想也就不会知道有这么一个坑了。扯远了，把deep去掉，代码放在el_cover.css中，再次npm run dev，项目启动成功。

ps，附一下vue官网关于css作用域的讲解：https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

pps，后来发现css的层级较深时也会出现内存溢出这个问题。

这里只是发现了nuxt下运行项目时out of memory的一个原因，至于为什么会这样以及是否还有其他操作也会导致内存溢出，如果你知道，不妨像我一样分享出来啊~