Nuxt3使用ant-design-vue/nuxt时候页面样式抖动

勇敢的山羊2024-06-250

下载antd

pnpm add @ant-design-vue/nuxt

配置Nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // ..... 其余配置
  runtimeConfig:{
    public:{
      title:process.env.NUXT_MY_APP_TITLE,
      baseURL:process.env.NUXT_MY_APP_REQUET_HTTP_BASE_URL
    }
  },
  antd:{
    // extract:{
    //     // 默认为true,表示是否开启全局样式
    //     enable:true,
    // },
    extractStyle: true
  },
  app:{
    head:{
      link:[
        // { rel: 'stylesheet', href: '/css/antd.css' },
        // { rel: 'stylesheet', href: '/css/naive.css' },
        { rel: 'stylesheet', href: '//at.alicdn.com/t/c/font_4373585_hgbarakf8bo.css'}
      ],
      meta: [
        {
          'http-equiv': 'Content-Security-Policy',
            content: 'upgrade-insecure-requests'
        },{
          name:"referrer",
          content:"no-referrer"
        }
      ],
      // 使用下面配置引入cdn
      // script:[{src:"https://unpkg.com/valine@1.5.1/dist/Valine.min.js"}],
    },
  },
  experimental:{ inlineSSRStyles:false },
  router:{
    options:{
      scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
      }
    }
  },
  plugins:[
    "~/plugins/markdown.ts",
    { src:'~/plugins/valine.ts',mode:'client'},
  ],
  modules: [
      '@ant-design-vue/nuxt',
      '@formkit/auto-animate/nuxt'
  ],
})

如果完成之后页面样式还是闪烁,在项目的 public/css 存放一份 antd.min.css 即可解决 且打包之后.output运行启动与本地样式无异

分类:随笔

标签:Nuxt.js

上一篇markdown文件插入Video测试下一篇MongoDB 设置用户/密码以访问数据库

版权声明

本文系作者 @勇敢的山羊 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~

Preview