Vue3+Vite项目如何配置依赖转译？适配@jsonforms包

首先注意：原Vue CLI配置里的@jsonforms/vue2、@jsonforms/vue2-vanilla是Vue2版本依赖，你使用Vue3的@jsonforms/vue-vanilla，需替换为Vue3对应的依赖包：@jsonforms/core、@jsonforms/vue、@jsonforms/vue-vanilla。

在Vite中，替代Vue CLI transpileDependencies的配置如下：

配置vite.config.js #

修改项目根目录下的vite.config.js，添加依赖预构建和CommonJS转译配置：

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

export default defineConfig({
  plugins: [vue()],
  // 指定需要预构建的JSON Forms依赖
  optimizeDeps: {
    include: ['@jsonforms/core', '@jsonforms/vue', '@jsonforms/vue-vanilla']
  },
  // 确保Vite正确转译CommonJS格式的JSON Forms模块
  build: {
    commonjsOptions: {
      include: [/jsonforms/, /node_modules/]
    }
  }
})

补充步骤 #

• 安装正确的Vue3兼容依赖：

  npm install @jsonforms/core @jsonforms/vue @jsonforms/vue-vanilla
  

• 若出现模块导入错误，删除node_modules/.vite缓存目录后重启开发服务器。

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