NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题
Posted 古兰精
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题相关的知识,希望对你有一定的参考价值。
关于Nuxt的css嵌入到html代码中的问题,效果如下:
解决方案其实很简单:在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")
]
}
以上是关于NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题的主要内容,如果未能解决你的问题,请参考以下文章