Nuxt プロジェクトの Web ページのソース コードには、多くの CSS 問題解決策が含まれています

ソースコードは次のようなものです。
ここに画像の説明を挿入

なぜこの問題が起こるのでしょうか?

通常のフロントエンドプロジェクトではcssファイルとjsファイルが一つずつ存在しますが、Nuxtプロジェクトはwebpackでパッケージ化した上で統合されます。

这是把element-ui的组件中的样式全部整合进来了。

Web クローラーは Web ページ データをクロールするときに JS を動的にコンパイルできないことはわかっていますが、上記のような CSS はクロールできます。
クローラーが取得する Web ページのソース コードには、これらの役に立たない情報が含まれており (クローラーにとっては役に立たず、Web ページの品質に関する判断力が低下します)、Web サイトの応答速度にも影響を与えるため、役に立ちません。ウェブサイトのSEOに!

解決:

nuxt.config ファイルを変更する

// 将内嵌CSS样式提取到外部
extractCSS: {
    
     allChunks: true },

ここに画像の説明を挿入
もう一度ソースコードを見てみましょう。

おすすめ

転載: blog.csdn.net/BubbleABC/article/details/130891490