Question

我当前正在运行一个在开发模式下可以正常工作的nuxt应用。但是，当我切换到生产模式时，您会看到某些CSS推迟到以后加载。我很确定这是一些有用的CSS。我之所以说是因为某些类确实已经存在。

您可以通过刷新this page（确保禁用缓存）来理解我的意思。

似乎我缺少某种nuxt / webpack配置来禁用它，但我不确定它是什么。

编辑：暂存站点有时会关闭，所以这是gif格式的情况，您可以看到某些关键的CSS稍后加载。

~~编辑＃2：在此处https://github.com/amritk/vuetify-nuxt-repro~~

添加了最小复制

编辑＃3：因此@Sabee解决了我的最小再现问题，但这并没有解决我的原始问题。如您在这里看到的，在客户端上添加了一些样式块，但是在服务器上却没有。如何确保将这些样式加载到服务器上？

服务器：

客户：

[ client side[3]

Edit＃3：具体来说，其v布局样式要晚加载。有什么办法可以在服务器上预加载此CSS？

Answer 1

我向您的仓库创建了一个拉取请求，并上传了代码to codesandbox。我认为您存在vuetify语法问题，建议您使用vuetify default app layout markup，您的代码必须如下所示：

默认.vue布局

<template lang="pug">
v-app
    v-toolbar(app color="primary")

        v-toolbar-title.white--text SiteLogo
        v-spacer
        v-toolbar-items
            v-btn(flat dark to="/" nuxt) home
            v-btn(flat dark to="/inspire" nuxt) Inspiration
            v-btn(flat dark) about    
    v-content
        nuxt
</template>

和index.vue

<template lang="pug">
v-container
    v-layout(row wrap)
        v-flex(xs12 sm6 offset-sm3)
            v-card
                v-img(src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75")
                v-card-title(primary-title)
                    div
                        h3(class="headline mb-0") Kangaroo Valley Safari
                        div {{ card_text }}
                v-card-actions
                    v-btn(flat color="primary") Share
                    v-btn(flat color="primary") Explore
        v-flex(pt-4)        
            div PLACEHOLDDDDDDDDDDDEEEEEEEEEEEEERRRRRRRRRRRR
            v-btn(to="/inspire" nuxt) inspuration
</template>
<script>
  export default {
    data () {
      return {
        card_text: 'Lorem ipsum dolor sit amet, brute iriure accusata ne mea. Eos suavitate referrentur ad, te duo agam libris qualisque, utroque quaestio accommodare no qui. Et percipit laboramus usu, no invidunt verterem nominati mel. Dolorem ancillae an mei, ut putant invenire splendide mel, ea nec propriae adipisci. Ignota salutandi accusamus in sed, et per malis fuisset, qui id ludus appareat.'
      }
    }
  }
</script>

您无需编写第二个vuetify loader即可使用默认设置。（如果需要配置）并将ssr:false添加到nuxt.config.js中的vuetify样式全局中，更好的方法是删除nuxt.config.js中的vuetify样式加载，在vuetify插件中完成。

Vuetify插件

import Vue from 'vue'
import Vuetify from 'vuetify/lib'


Vue.use(Vuetify, {
    theme: {
        // HC Green
        primary: {
            lighten3: '#009546', // hc-light-green
            base: '#008940'      // hc-green
        },
        // Blue
        accent: {
            lighten1: '#23BFFF', // light-blue
            base: '#0279D7',     // medium-blue
            darken3: '#0D47A1'   // dark-blue, darker-blue
        },
        // Grey
        secondary: {
            lighten5: '#FFFFFF', // white
            lighten4: '#EFEFEF', // lighter-grey, dark-white
            lighten3: '#DFDFDF', // light-medium-grey, light-grey
            base: '#9F9F9F',     // medium-grey
            darken2: '#777777',  // pastel-grey
            darken3: '#3E3E3E',  // darker-grey, charcoal-grey, light-black, dark-medium-grey, dark-grey
            darken5: '#000000'   // black
        },
        // Blue
        info: {
            base: '#0279D7'      // medium-blue
        },
        // Orange/Yellow
        warning: {
            lighten3: '#fad53e', // light-orange aka yellow
            base: '#ff8800',     // from https://www.google.com/search?q=css+warning+color
            darken3: '#e65100'   // dark-orange
        },
        // Red
        error: {
            lighten1: '#ff5252', // light-red
            base: '#B71C1C'      // medium-red
        },
        // Green
        success: {
            lighten3: '#4CAf50', // light-green
            base: '#28a745',     // bootstrap green https://getbootstrap.com/docs/4.3/getting-started/theming/
            darken3: '#00592A'   // dark-green
        }
    }
})

nuxt.config.js

import Sass from 'sass'
import dotenv from 'dotenv'
import vuetifyLoader from './src/plugins/vuetify-loader'
dotenv.config()

const config = {
    mode: 'universal',
    debug: !(process.env.NODE_ENV === 'production'),

    // Loading bar color
    loading: {
        color: '#fff'
    },

    // Global css
    css: [{ src: '~/assets/style/vuetify.styl', lang: 'styl',ssr:false }],

    // Change src directory
    srcDir: 'src/',
    // Plugins
    plugins: [
        { src: '@/plugins/vuetify' }
    ],

    // Nuxt.js modules
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/dotenv',
        ['cookie-universal-nuxt', { alias: 'nuxtCookies' }]
    ],

    // Babel
    babel: {
        presets: ['@babel/preset-env'],
        plugins: [
            '@babel/plugin-transform-modules-commonjs',
            'dynamic-import-node',
            '@babel/plugin-syntax-dynamic-import',
            [
                'transform-runtime',
                {
                    polyfill: false
                }
            ]
        ]
    },

    // Build Config
    build: {
        filenames: {
            app: ({ isDev }) => isDev ? '[name].js' : '[name]-[hash].js',
            chunk: ({ isDev }) => isDev ? '[name].js' : '[name]-[hash].js'
        },

        // Extend webpack config
        extend: (config, ctx) => {

            config.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map'
        },

        loaders: {
            sass: {
                implementation: Sass
            }
        },

        // Vuetify Loader - To auto load your components
        transpile: [/^vuetify/],
        plugins: [ vuetifyLoader]
    }
}

export default config

如有任何疑问，请与我联系

Answer 2

好的，@ Sabee的答案使我找出了问题所在。事实证明，没有加载VLayout组件中的样式。我相信这是一个与nuxt相反的vuetify-loader插件问题。它被加载到服务器而不是客户端上。我所要做的就是在一开始就更改配置以加载VLayout，它就可以了！

Vuetify插件

import Vue from 'vue'
import Vuetify, { VLayout } from 'vuetify/lib'

Vue.use(Vuetify, {
    options: {
        .
        .
        .
    },
    theme: {
        .
        .
        .
    },
    components: {
        VLayout
    }
})

Nuxt生产模式后期加载资源

2 个答案: