一、NuxtJS處理因css在服務端渲染而增加源代碼量，從而影響到SEO的問題
1、問題背景
關於Nuxt的css嵌入到html代碼中的問題，效果如下：
項目很大，這個 css 就會很大，會影響 SEO 的收錄。
2、解決方案
解決方案其實很簡單：在nuxt.config.js文件中的build對象添加extractCSS: { allChunks: true }，extractCSS是將內嵌的css提取到外部，allChunks代表所有的都執行，代碼如下：
build: { extractCSS: { allChunks: true } }
保存后，再次查看網頁源代碼發現就沒有內嵌css了，而是2個css文件。
並且網頁所用到的css都會合並成兩個文件，一個公共的未加scoped的，一個是加了scoped的。
二、Vue 提取 CSS 到單個文件
vue官網也提供了提取 CSS 到單個文件的方法
1、安裝插件：npm install extract-text-webpack-plugin --save-dev
2、使用
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = { // other options...
module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { extractCSS: true } } ] }, plugins: [ new ExtractTextPlugin("style.css") ] }
上述內容將自動處理 *.vue 文件內的 <style> 提取，並與大多數預處理器一樣開箱即用。
注意這只是提取 *.vue 文件 - 但在 JavaScript 中導入的 CSS 仍然需要單獨配置。
3、手動配置：將所有 Vue 組件中的所有已處理的 CSS 提取為單個 CSS 文件配置示例
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = { // other options...
module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' // <- 這是vue-loader的依賴，所以如果使用npm3，則不需要顯式安裝
}) } } } ] }, plugins: [ new ExtractTextPlugin("style.css") ] }