css vue 内联_vue ssr css内联样式和link标签重复

我把基于vue-cli3的项目改造成了SSR，发现服务器吐出的html中内联了css，同时还会注入css的link标签，这样造成了css的重复引入。

我不想在html中注入内联的style，我想全部使用link标签，对于不经常变化的css这样能更好的利用缓存，该如何做？

以下是vue.config.js

const WebpackBar = require('webpackbar');

const nodeExternals = require('webpack-node-externals');

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');

const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');

const IS_PROD = process.env.NODE_ENV === 'production';

// 用于标记是否是SSR构建

const IS_SSR = process.env.RUN_MODE === 'ssr';

// 用于区分SSR的client和server构建

const { SSR_SIDE } = process.env;

const IS_SSR_SERVER = SSR_SIDE === 'server';

module.exports = {

productionSourceMap: false,

css: {

extract: IS_PROD && (!IS_SSR || !IS_SSR_SERVER),

},

chainWebpack(config) {

// 默认入口

config

.entry('app')

.clear()

.add('./src/entry-client.js')

.end();

if (!IS_SSR || !['server', 'client'].includes(SSR_SIDE)) return;

// ssr入口

config

.entry('app')

.clear()

.add(`./src/entry-${SSR_SIDE}.js`)

.end();

// loader

config

.module

.rule('vue')

.use('vue-loader')

.tap((options) => {

if (IS_SSR_SERVER) {

options.cacheIdentifier += '-server';

options.cacheDirectory += '-server';

}

options.optimizeSSR = IS_SSR_SERVER;

options.extractCSS = IS_PROD;

return options;

})

.end()

.use('cache-loader')

.tap((options) => {

if (IS_SSR_SERVER) {

options.cacheIdentifier += '-server';

options.cacheDirectory += '-server';

}

return options;

});

// plugin

config

.plugin('vue-ssr')

.use(IS_SSR_SERVER ? VueSSRServerPlugin : VueSSRClientPlugin)

.end()

.plugin('loader')

.use(WebpackBar, [{

name: IS_SSR_SERVER ? 'Build server' : 'Build client',

color: IS_SSR_SERVER ? 'blue' : 'green',

}])

.end();

// 移除不必要的plugin

config

.plugins

.delete('hmr')

.delete('preload')

.delete('prefetch')

.delete('progress');

config

.target(IS_SSR_SERVER ? 'node' : 'web');

if (IS_SSR_SERVER) {

config

.devtool('source-map')

.node

.clear()

.end()

.output

.libraryTarget('commonjs2')

.end()

.externals(nodeExternals({ whitelist: [/\.css$/, /\?vue&type=style/] }))

.optimization

.splitChunks(false);

}

},

};

通过以上的ssr配置，吐出的html如下：

其中，内联的style与/css/app.84e85091.css和/css/home.fb83d978.css内容重复