记一次nuxt引入videojs排查问题经历

发现问题

开发的项目是基于nuxt框架,项目中需要使用videojs,在开发阶段没有问题,使用与样式展示都没有问题.

在打包之后运行,发现videojs的样式不能正确展示.样式错误,发现样式没有被打包.

解决问题(阶段1)

发现nuxt.config.js里面有一个配置extractCSS是用来提取css的,把css提取到一个文件里面,把这个配置设置为false就可以解决这个问题.

但是有了新的问题,因为没有提取css,nuxt在服务端渲染的时候,会把所有的样式在html页面返回,导致html的文件比较大.

当时花了一些时间,只找到这个解决办法,而且项目比较赶,暂时这样解决

解决问题(阶段2)

网页需要seo,因为样式全在html里面,不相关内容太多,权重比较低.seo大佬建议去掉这些样式.

找了好久,发现是因为用了tailwindcss这个ui框架,tailwindcss建议使用purgecss这个库来去除不需要的css,不然打包后的文件会比较大.

videojs是在客户端使用js动态添加的class,导致purgecss匹配不到这些样式.所以就从打包后的css内删除.导致样式展示错误.

去看官方文档,看到有一个safelist可以保留这些样式于是在nuxt.config.js内增加如下代码

export default {
    // ...
    purgeCSS:{
        safelist: [/vjs/, /video/]
    }
    //...
}

发现不起作用,各种尝试,safelist.deep,safelist.standard属性,不使用正则等…还是不行,直到看到了一个tip

对比了一下自己的安装的依赖,发现nuxt使用的是老版本的purgecss,找到的相关的配置,代码如下.

export default {
    // ...
    purgeCSS: {
        whitelistPatterns: [/vjs/, /video/],
        whitelistPatternsChildren: [/vjs/, /video/]
    },
    //...
}

问题解决.

总结

使用tailwindcss样式库,而且用到purgecss这个插件,要注意打包过后的样式是否正确,这个插件会删除不用的css(就是在页面中,没有匹配到相应的class名).
在如上前提下,出现新引入的框架样式展示不正确,考虑在nuxt.config.js里面添加相应的配置.

purgecss 3.0版本以上添加

export default {
    // ...
    purgeCSS:{
        safelist: [/vjs/, /video/]
    }
    //...
}

purgecss 2.x 版本添加

export default {
    // ...
    purgeCSS: {
        whitelistPatterns: [/vjs/, /video/],
        whitelistPatternsChildren: [/vjs/, /video/]
    },
    //...
}

发现问题要及时解决.不能有 又不是不能用 这个心态…55555.

灯的个人博客

记一次nuxt引入videojs的问题

记一次nuxt引入videojs排查问题经历

发现问题

解决问题(阶段1)

解决问题(阶段2)

总结

参考文档