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

注-背景

解决方案从扯谈开始:

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

正常情况下如图:

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

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

如果你百度搜索,那么它将向你推荐如下:

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

不为接受的解决方案

为了解决这个问题,可以采取以下措施:

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

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

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

  1. 禁用服务端渲染(SSR):如果你的应用程序不需要考虑服务端渲染的需求,可以禁用SSR。在nuxt.config.js中的mode选项中将其设置为client。例如:
js 复制代码
// 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插件的配置。

js 复制代码
// 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样式。
js 复制代码
// nuxt.config.js
export default {
  // ...
  css: [
    '@/assets/antd.min.css' // 引入antd.min.css
  ],
  // ...
}
  1. 重新启动Nuxt.js开发服务器。antd.min.css文件现在应该已经成功引入并应用到你的应用程序中。

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

相关推荐
AverageJoe199114 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平15 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown17 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易21 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
markyankee10122 分钟前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
ma7725 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在26 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
借月27 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang29 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻30 分钟前
前端面试十一之TS
前端