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嵌入問題完美解決，希望對大家有幫助。

 

 

 

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