Vue3/Vite集成@kie-tools/kie-editors-standalone时路径错误与依赖缺失

问题核心 #

这个库基于Webpack生态开发，资源路径解析逻辑和Vite的模块机制不兼容，再加上部分依赖未在自身package.json中声明，导致点击编辑按钮后，资源错误地从根路径加载，最终决策表无法渲染。

具体解决方案 #

1. 配置Vite资源路径重定向

在vite.config.ts中添加别名和请求拦截，把库从根路径发起的资源请求，重定向到node_modules里的对应位置：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 根据控制台404的路径调整，比如拦截/dmn-editor/开头的资源
      '/dmn-editor/': '/node_modules/@kie-tools/kie-editors-standalone/dist/dmn-editor/',
      // 其他缺失资源路径可按此格式添加
    }
  },
  server: {
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url?.startsWith('/dmn-editor/')) {
          req.url = `/node_modules/@kie-tools/kie-editors-standalone/dist${req.url}`
        }
        next()
      })
    }
  }
})

2. 手动安装缺失依赖

针对控制台提示的未声明依赖（比如monaco-editor、@bpmn-io/dmn-js这类），直接通过包管理器安装：

npm install monaco-editor @bpmn-io/dmn-js --save

3. 修改编辑器初始化配置

初始化编辑器时，指定basePath参数，强制资源从正确路径加载：

import { DmnEditor } from '@kie-tools/kie-editors-standalone';

const editor = new DmnEditor({
  container: document.getElementById('dmn-editor-container'),
  basePath: '/node_modules/@kie-tools/kie-editors-standalone/dist/',
  // 其他原有配置...
});

4. 权宜方案：复制静态资源到public目录

如果以上方法无效，可通过rollup-plugin-copy把库的静态资源复制到项目public目录，让根路径能直接访问：
先安装插件：

npm install rollup-plugin-copy --save-dev

再在vite.config.ts中配置：

import copy from 'rollup-plugin-copy';

export default defineConfig({
  plugins: [
    vue(),
    copy({
      targets: [
        {
          src: 'node_modules/@kie-tools/kie-editors-standalone/dist/**/*',
          dest: 'public/dmn-editor'
        }
      ],
      hook: 'buildStart'
    })
  ]
})

之后编辑器的basePath设为/dmn-editor/即可。

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