一、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") ] }