vuetify-form-base 表单未在生产模式下加载答案

【问题标题】：vuetify-form-base Form not Load in Production Modevuetify-form-base 表单未在生产模式下加载
【发布时间】：2021-06-13 12:12:04
【问题描述】：

我在 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-base 的用法是：

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

【问题讨论】：

不确定你分享了什么，但这不是 Nuxt 项目。另外，您的target 是什么？默认一个？在npm run start 之前尝试过npm run build？
我试过这个但没有用。最简单的测试方法是创建 nuxt 项目并添加 vuetify-form-base 和一个简单的表单。提醒在 nuxt.config.js 中设置 ssr:false
vuetify-form-base 并非易事，我们可能需要您的实际代码来查看问题所在。我们这里甚至没有schema。另外，参考我之前的评论，什么不起作用？

标签： vue.js nuxt.js vuetify.js dynamic-forms

【解决方案1】：

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

解决方案1：

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

您应该将这个包导出到一个插件中，如下所示： 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 包。

【讨论】：

【解决方案2】：

答案对我来说并不清楚，所以我想告诉你一步一步解决这个问题的简单方法。我花了很多时间解决了这个问题，这里是解决方案： 1-安装 v-mask 包 2-只需将https://github.com/wotamann/vuetify-form-base/blob/master/dist/src/vFormBase.vue 复制到您的组件文件夹 3- 在你的插件中使用Vue.component('VueMask', () => import('v-mask')) 4- 然后只删除页面中的基于表单的导入。

【讨论】：