vuetify-form-b​​ase 表单未在生产模式下加载

问题描述

我在 Nuxt-Vue 项目中使用了 vuetify-form-base，并且在开发模式下 evrythings 没问题（npm run dev） 当我切换到生产模式时（npm run start）；表单未加载且未发生错误或警告。

我的 nuxt.config.js 文件是：

import colors from 'vuetify/es5/util/colors'

export default {
  ssr: false,head: {
    titleTemplate: '%s - nuxt-form-sample',title: 'nuxt-form-sample',htmlAttrs: {
      lang: 'en'
    },Meta: [
      { charset: 'utf-8' },{ name: 'viewport',content: 'width=device-width,initial-scale=1' },{ hid: 'description',name: 'description',content: '' }
    ],link: [
      { rel: 'icon',type: 'image/x-icon',href: '/favicon.ico' }
    ]
  },components: true,buildModules: [
    '@nuxtjs/vuetify',],vuetify: {
    customVariables: ['~/assets/variables.scss'],theme: {
      dark: true,themes: {
        dark: {
          primary: colors.blue.darken2,accent: colors.grey.darken3,secondary: colors.Amber.darken3,info: colors.teal.lighten1,warning: colors.Amber.base,error: colors.deepOrange.accent4,success: colors.green.accent3
        }
      }
    }
  }
}

和 vuetify-form-b​​ase 的用法是：

<div>
  <v-form-base :schema="schema" :model="model"/>
</div>

解决方法

我解决了这个问题 https://github.com/wotamann/vuetify-form-base/issues/50 在 SSR 模式下表单没有正确渲染！

解决方案 1：

您应该使用 'v-mask' 包并在 vuetify-form-b​​ase 包中导入主要组件文件。

你应该在一个插件中导出这个包，如下所示： Vue.component('VueMask',() => import('v-mask'))

然后将主文件组件添加到您的项目中：

https://github.com/wotamann/vuetify-form-base/blob/master/dist/src/vFormBase.vue

替代解决方案：

• 您可以使用 https://www.npmjs.com/package/vuetify-form-base-ssr 包。