nuxt CSS 存放到独立文件进行SEO优化

nuxt CSS 到独立文件
在Nuxt.js中将CSS样式从单个文件分离为多个独立的文件可以通过使用extract-text-webpack-plugin来完成。

首先，确保已经安装了该插件：

npm install extract-text-webpack-plugin --save-dev

然后，在项目根目录下创建一个名为plugins/cssExtractPlugin.js的新文件，并添加如下内容：

import ExtractTextPlugin from 'extract-text-webpack-plugin';export default function ({ isClient }) {return [new ExtractTextPlugin({filename: (getPath) => getPath('[name].[contenthash].css'), // 设置输出的CSS文件路径及命名规则allChunks: true, // 提取所有chunk（包括入口点）的CSSdisable: !isClient // 仅在客户端构建时生效}),];
}

接下来，打开nuxt.config.js文件，并进行相应配置修改：

module.exports = {build: {extend(config, ctx) {if (!ctx.isDev && ctx.isClient) {config.plugins.push(...require('./plugins/cssExtractPlugin')());}},},
};

最后，重新运行Nuxt.js服务器或者编译前端静态文件，就会自动将CSS样式从主要的JavaScript文件中分离出来，存放于独立的.css文件中。