Nuxt应用antd之后刷新页面出现样式短暂丢失

1. 注-背景

解决方案从扯谈开始：

antdv从4.0.x开始官方提供了@ant-design-vue/nuxt模块包，但如果你只是使用它，不做任何处理的话，你就会发现你的页面在刷新时会短暂的出现css样式丢失的问题，导致页面闪烁。

很显然这是因为在服务器端渲染期间，由于样式表尚未加载完成，页面会以无样式的状态呈现，导致闪烁。

这个问题的根本原因是在服务器端渲染期间，CSS样式表需要在页面加载时同步加载并应用。而@ant-design-vue/nuxt模块包在服务器端渲染期间无法保证样式表的同步加载。

如果你百度搜索，那么它将向你推荐如下：

为了解决这个问题，可以采取以下措施：

// nuxt.config.js

export default {
  css: [
    { src: 'ant-design-vue/dist/antd.css', async: true },
  ],
}

通过将async选项设置为true，样式表将在客户端渲染期间异步加载，避免页面闪烁。

禁用服务端渲染（SSR）：如果你的应用程序不需要考虑服务端渲染的需求，可以禁用SSR。在nuxt.config.js中的mode选项中将其设置为client。例如：

// nuxt.config.js

export default {
  mode: 'client',
}

这将确保你的应用只在客户端渲染，并解决样式丢失和页面闪烁的问题。

需要注意的是，禁用服务端渲染会导致一些功能，如SEO和首次加载性能的下降。如果你的应用需要考虑这些方面，请慎重选择是否禁用SSR。

总之，要解决@ant-design-vue/nuxt模块包在刷新时出现样式丢失和页面闪烁的问题，可以使用异步加载样式表或禁用服务端渲染，具体取决于你的应用需求和场景

方案1中，使用：{ src: 'ant-design-vue/dist/antd.css', async: true },，可惜antd4新版本已经取消了这种机制，不存在该css文件

方案2：Nuxt3的SSG是服务端和客户端渲染都能充分利用起来的，而此做法则变回单一，则失去了该框架的意义了。

在nuxt.config.js文件中，添加@ant-design-vue/plugin-vue插件的配置。

// nuxt.config.js
export default {
  // ...
  plugins: [
    { src: '@/plugins/antdv', mode: 'client' }, // 引入插件
  ],
  // ...
}

// nuxt.config.js
export default {
  // ...
  css: [
    '@/assets/antd.min.css' // 引入antd.min.css
  ],
  // ...
}

通过以上步骤，你就可以在Nuxt.js中引入antd.min.css文件，并将其作为全局CSS样式应用到你的应用程序中。这样，你可以使用Ant Design的样式规范和组件库，并确保应用程序的样式与Ant Design保持一致。