Nuxt之css分离（处理因css在服务端渲染而增加源代码量，从而影响到SEO）

关于Nuxt的css嵌入到html代码中的问题，之前被这个问题困扰了很久，效果如下：

后台找到了解决方案，用了外部引入方法:

export default {
  head: {
    link:[{href:"/css/index.css"}]
  }
}

这样html中就没有嵌入css了，而是link标签引入，但是这样就会造成一个问题，那就是打包发布后，在浏览器上会重复加载css，并且多个css的引入也增加了http请求次数，所以为了更加优化网站性能，再次寻找更好的解决方案。

解决方案其实很简单：在nuxt.config.js文件中的build对象添加extractCSS: { allChunks: true }，extractCSS是将内嵌的css提取到外部，allChunks代表所有的都执行，代码如下：

build: {
    extractCSS: { allChunks: true }
}

保存后，再次查看网页源代码：

并且网页所用到的css都会合并成两个文件，一个公共的未加scoped的，一个是加了scoped的

到此，css嵌入问题完美解决，希望对大家有帮助。

 

 

 

千山我独行，不必相送。
——《楚留香》