Nuxt3使用Naive UI解决刷新页面样式延迟加载问题

55次阅读

没有评论

最近开始用这个组件库, 在按照官网文档搞完按需自动引入后, 发现首页出现刚进入时会没有样式

像上图这样

错误原因

可能是因为nuxtjs-naive-ui这个库太久没更新来适配Nuxt, 上次更新是7个月前, 我看到有人提交修复, 但是还没有合并到分支

临时解决方法

然后在github找了很久解决办法, 最终找到一个办法

在plugins目录下建naive-ui.ts

添加以下代码

import { setup } from '@css-render/vue3-ssr'
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(nuxtApp => {
  if (import.meta.server) {
    const { collect } = setup(nuxtApp.vueApp)
    nuxtApp.ssrContext!.head.push({
      style: () =>
        collect()
          .split('</style>')
          .map(block => {
            const id = block.match(/cssr-id="(.+?)"/)?.[1]
            const style = (block.match(/>(.*)/s)?.[1] || '').trim()
            return {
              ['cssr-id']: id,
              innerHTML: style
            }
          })
    })
  }
})

然后刷新页面, 发现组件样式可以正常加载

但是又有新的问题, 控制台又报错了

ssr:warn [Vue warn]: App already provides property with key "@css-render/vue3-ssr". It will be overwritten with the new value. 
  at <anonymous> (E:\Users\Administrator\Documents\VSCode Projects\shortcut-frontend\node_modules\nuxt\dist\core\runtime\nitro\dev-server-logs.js)
  at Object.log (E:\Users\Administrator\Documents\VSCode Projects\shortcut-frontend\node_modules\nuxt\dist\core\runtime\nitro\dev-server-logs.js)
  at warn$1 (E:\Users\Administrator\Documents\VSCode Projects\shortcut-frontend\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js)
  at Object.provide (E:\Users\Administrator\Documents\VSCode Projects\shortcut-frontend\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js)
  at setup (E:\Users\Administrator\Documents\VSCode Projects\shortcut-frontend\node_modules\@css-render\vue3-ssr\lib\index.js)

参考了另外一个帖子后, 直接把nuxtjs-naive-ui删了就解决了

图中高亮位置可以删了, 官网的Nuxtjs自动按需引入配置可以保留, 依然生效

参考链接:

Nuxt3.7 组件样式没有在服务端生成的html内 · Issue #5220 · tusen-ai/naive-ui

正文完