解决nuxt使用rem适配样式第一次加载闪烁的问题 amfe-flexible

在使用vant框架的时候，一般都是使用rem自动适配，这个东西有好有坏，具体就不细说，我们这次处理的问题就是使用了rem适配，他样式第一次加载闪烁的问题。

其实出现这个问题，大多数都是使用了plugins插件的方式加载rem适配。

具体如下：

1. 在plugins目录下创建了lib-flexible.js文件，文件名随意
2. 打开文件，在里面写入import 'amfe-flexible'
3. 打开nuxt.config.js，在plugins中加入代码{ src: '@/plugins/lib-flexible', mode: 'client' },//rem适配

这样的确可以使用，但是却产生了首次加载样式会闪烁一次的问题。

为什么

其实很简单，虽然我们的css样式px单位在打包后会自动转成rem单位，但是我们的body元素并没有被设置font-size大小，这个设置需要amfe-flexiblejs插件来完成。

但是再nuxt中，在plugins中使用的插件，并不能保证js插件一定是在加载html内容前加载的，这就导致，html内容加载完了，都渲染好了，js文件才加载完毕，然后设置body的font-size，然后rem单位的效果，元素的大小发生变化。

导致样式发生闪烁。

解决办法

我们需要提取出amfe-flexible插件的js文件。

找到node_modules目录下的amfe-flexible目录，里面有两个js文件：

1. index.js
2. index.min.js

由于我们不需要改动内容，所以我将index.min.js复制到nuxt的static/js目录下

然后改个名字方便辨认，比如：flexible.min.js

然后找到nuxt.config.js文件，先去除之前的plugins加入的rem适配代码，然后head属性中手动导入flexible.min.js

export default {
  head: {
    script:[
      { src: "/js/flexible.min.js" },
    ]
  }
}

此时我们再刷新，可以发现，样式不会闪烁了。

问题解决。奈斯！！！