在初始 DOM 加载后添加 Vuetify 样式

Vuetify styles being added after initial DOM load

我在 "nuxt": "2.15.4""@nuxtjs/vuetify": "1.12.1""sass": "1.32.13" 上,并在我的默认布局中添加了一个导航栏组件,该组件使用 v-navigation-drawer 并且在页面加载的第一时刻有一个闪烁,所有东西(抽屉)都溅在屏幕上,然后 css 被加载。 我读过 nuxt-css-issue 这个并且有点理解这是因为 nuxt 和 vuetify 行为。那么有什么办法可以解决这个问题吗??加载应用程序时真的很丑!!

哦顺便说一句,我使用 nuxt 通用 ssr 并且 vuetify treeShake 是真的

所以,你要么等待 CSS 随 JS 一起出现(性能更好,但可能会有一些小的闪烁),要么在开始时全局加载所有 CSS,然后JS(在速度方面不太好,但没有闪烁)。我理解问题了吗?

不确定这个问题是否有真正的解决方案,除了可能显示隐藏组件,直到他加载了 @hook:mounted 挂钩和 v-show 完成后显示组件。更多信息在这里:

你在 Vuetify 的 github issues 上发现了什么吗?
不确定是否有可用的东西,请随意 post 一个新问题。


PS:这里可能有一些恶作剧,一旦我们到达特定页面或某个钩子就预加载一些 CSS。不确定这将如何实现,但了解 JS 生态系统,这种 hack 可能是可行的。