0
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
运行启动与本地样式无异
版权声明
本文系作者 @羊羊 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~
Preview