NUXT.JS框架打版后生成静态页面CSS太长解决方法

在开发我们公司的恒相产品画册项目时，使用VUE框架开发SEO就无法优化了，最后采用UNXT.JS框架开发此项目。项目第一阶段开发完毕后，打版上线也没有注意CSS的问题，在使用站长工具查询时，抓取页面数据显示无用代码过长不利于SEO。扒了了好多解决方案，经测试一下方法可用。

一、在NUXT.JS框架中找到nuxt.config.js配置文件；

二、在页面中找到build配置项,如果没有请自行添加；

export default {
    head: {},
    css: [],
    plugins: [],
    buildModules: [],
    modules: [],
    axios: {},
    proxy: {},
    build: {
        ************
        ************
    }
}

三、设置extractCSS为true,如果没有请自行添加；

export default {
    head: {},
    css: [],
    plugins: [],
    buildModules: [],
    modules: [],
    axios: {},
    proxy: {},
    build: {
        extractCSS: true
    }
}

四、设置optimization对象，如果没有请自行添加；

export default {
    head: {},
    css: [],
    plugins: [],
    buildModules: [],
    modules: [],
    axios: {},
    proxy: {},
    build: {
        extractCSS: true,
        optimization: {
             splitChunks: {
                   cacheGroups: {
                         styles: {
                            name: 'styles',
                            test: /\.(css|vue)$/,
                            chunks: 'all',
                            enforce: true
                         }
                   }
             }
        }
    }
}