如何在Vue3+Vite+Ts+TailwindCSS项目中正确打包静态资源?-灵析社区

雁过留痕

我想做一个UI组件,然后使用的是Vue3+Vite+Ts+tailwindcss 问题出现在这个静态资源这里,我的静态资源放在了src/assets下,包括图片还有style.css, @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Noto+Color+Emoji&family=Noto+Sans+SC:wght@100;200;300;400;500;600;700;800;900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; 然后我使用Vite的库模式打包,并没有打包我的style.css文件,只打包了vue文件中的style标签的css,并且静态文件的图片也是没有打包,而是直接转换成了base64,对于图片多的情况下,这样页面会很卡顿,我想知道怎么解决呢? 网上搜索的方法都尝试过,发现并没有作用

阅读量:213

点赞量:0

问AI
1. 猜测你的 style.css 没有 import,所以 vite 认为不需要,就没打包 2. 图片 base64 不会导致卡顿,最多就是加载时间变长 3. 你可以调整 "build.assetsInlineLimit" (https://link.segmentfault.com/?enc=gXXNm3NfV5MSQ8WMv%2F1RZQ%3D%3D.kHBiboRnDyTO1mlXS63FS0KSEzvax9MsN2Wg692z30vBBq%2BvAkWFQGlCi0VcmP%2B6O7dCL0hxfgVvSjFeVYtb4XcpW1X46C8yxOeBZRLgUqw%3D) 配置要求 vite 不要 inline 小资源。