Vue3+Vite环境下使用VJSF遇依赖错误求解决方案及替代方案

一、修复VJSF的Vite依赖解析错误 #

• 核对依赖版本：@koumoul/vjsf对ajv系列依赖有版本要求，先执行npm list ajv ajv-i18n ajv-errors查看版本，若不匹配，安装指定兼容版本：
  npm install ajv@8.12.0 ajv-i18n@4.2.0 ajv-errors@3.0.0
• 调整Vite配置：在vite.config.js/ts中补充完整的依赖优化和转译配置，解决CommonJS格式依赖的解析问题：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['ajv', 'ajv-i18n', 'ajv-errors'],
    esbuildOptions: {
      target: 'es2020',
      loader: {
        '.js': 'jsx'
      }
    }
  },
  resolve: {
    alias: {
      // 修正ajv的路径别名，避免Vite解析错误
      'ajv/dist/2019.js': 'ajv/dist/ajv2019.js'
    }
  }
})

• 清除Vite缓存：删除项目根目录下的node_modules/.vite文件夹，重启开发服务，避免缓存导致的优化异常
• 规范组件引入：确保在Vue组件中正确引入VJSF及样式：

<template>
  <Vjsf v-model="formData" :schema="schema" />
</template>

<script setup>
import { ref } from 'vue'
import { Vjsf } from '@koumoul/vjsf'
import '@koumoul/vjsf/dist/vjsf.css'

const formData = ref({})
const schema = ref({
  type: 'object',
  properties: {
    name: { type: 'string', title: '姓名' }
  }
})
</script>

二、Vue3+Vuetify3兼容的表单生成工具推荐 #

• Vuetify Form Generator：原生适配Vuetify3和Vue3，完全基于Vuetify组件构建，支持JSON Schema配置，和VJSF使用逻辑接近，无额外兼容问题
• FormKit：Vue3专属表单库，可通过自定义适配器对接Vuetify3组件，提供完整的表单验证、生成能力，灵活性强
• Vue Formulate：轻量级Vue3表单工具，支持自定义组件模板，能快速适配Vuetify3样式，适合中小型项目快速开发

内容的提问来源于stack exchange，提问作者letsCode