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（包括入口点）的CSS
      disable: !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文件中。