Nuxt3: 引入antd样式出现闪烁？

注-背景

解决方案从扯谈开始：

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

正常情况下如图：

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

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

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

付费教程。 那么为了不付费，可以往下看。

不为接受的解决方案

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

1. 使用异步加载样式表：可以在nuxt.config.js文件中的css配置中将样式表设置为异步加载。例如：

// nuxt.config.js

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

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

2. 禁用服务端渲染（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是服务端和客户端渲染都能充分利用起来的，而此做法则变回单一，则失去了该框架的意义了。

最为便捷的方案

1. 配置插件

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

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

2. 引入antd.min.css

要在Nuxt.js中引入antd.min.css文件，可以按照以下步骤进行操作：

1. 在你的Nuxt.js项目中，创建一个名为assets的文件夹（如果不存在），用于存放静态资源文件。
2. 将下载的antd.min.css文件放入assets文件夹中。
3. 在你的Nuxt.js应用的nuxt.config.js文件中，使用css属性来配置全局CSS样式。

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

4. 重新启动Nuxt.js开发服务器。antd.min.css文件现在应该已经成功引入并应用到你的应用程序中。

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