我正在构建一个Vue 3/TypeScript/Vite应用程序，其中一个页面专门用于显示带有规则文件的只读DMN编辑器。为此，我使用@kie-tools/kie-editors-standalone。下面是有问题的Vue文件：

<template>
  <h1>Rules</h1>

  <div id="dmn-editor-container"></div>

  <ErrorDialogueBox ref="errorDialogueBox"/>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import axios from "axios";
import {useAppConfigStore} from "@/stores/config.store";
import {storeToRefs} from "pinia";
import {useAuthStore} from "@/stores/auth.store";
import * as DmnEditor from "@kogito-tooling/kie-editors-standalone/dist/dmn";
import ErrorDialogueBox from "@/components/ErrorDialogueBox.vue";
import type {ApiError} from "@/api";

const {token} = storeToRefs(useAuthStore());
const {backendApi} = useAppConfigStore();

const webApi = backendApi();

const errorDialogueBox = ref<InstanceType<typeof ErrorDialogueBox> | null>(null);
const showError = (title: string, message: string) => errorDialogueBox.value?.showError(title, message);

onMounted(() => {
  webApi.get("/rules",
            {
              headers: {Authorization: `Bearer ${token.value}`},
            })
        .then(result => {
          const xml = result.data;
          const element = document.getElementById("dmn-editor-container");
          if (element) {
            DmnEditor.open({
              container: element,
              initialContent: Promise.resolve(xml),
              readOnly: true
            });
          } else {
            showError("DOM error", "Could not find dmn-editor-container element");
          }
        })
        .catch(error => {
          if (axios.isAxiosError(error)) {
            const apiError = error.response?.data as ApiError;
            console.log(apiError);
            showError("Could not fetch details", apiError.message || error.message);
          } else {
            console.log(error);
            showError("Could not fetch details", error as string);
          }
        });
});
</script>

<style scoped>
#dmn-editor-container {
  height: 70vh;
}
</style>

字符串
这就是package.json：

{
  "name": "woof-service-web",
  "version": "1.0.0-SNAPSHOT",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test": "echo 'no test'",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "e2e": "echo 'no e2e'",
    "package": "npm pack",
    "publish-to-nexus": "npm publish"
  },
  "publishConfig": {
    "registry": "https://nexus.woof.com/repository/WOOF-NPM-SNAPSHOTS/"
  },
  "dependencies": {
    "@kie-tools/kie-editors-standalone": "^0.30.0",
    "@types/bootstrap": "^5.2.6",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "keycloak-js": "^21.1.1",
    "pinia": "^2.1.3",
    "pinia-plugin-persistedstate": "^3.1.0",
    "sass": "^1.63.6",
    "vue": "^3.3.4",
    "vue-i18n": "^9.3.0-beta.21",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@tsconfig/node18": "^2.0.1",
    "@types/jsdom": "^21.1.1",
    "@types/node": "^18.16.17",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.3.2",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "jsdom": "^22.1.0",
    "npm-run-all": "^4.1.5",
    "typescript": "~5.0.4",
    "vite": "^4.3.9",
    "vitest": "^0.32.0",
    "vue-tsc": "^1.6.5"
  }
}

型
图表实际上呈现正确，但单击铅笔图标时决策表都是空的。控制台中也有很多404错误：

GET http://localhost:5173/jquery-ui/jquery-ui.min.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/bootstrap-daterangepicker/daterangepicker.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/bootstrap-select/css/bootstrap-select.min.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/uberfire-patternfly.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/patternfly.min.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/patternfly-additions.min.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/bootstrap-datepicker3-1.6.4.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/animate-3.5.2.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/bootstrap-notify-custom.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/card-1.0.1.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/bootstrap-slider-9.2.0.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/bootstrap-datetimepicker-2.4.4.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/css/typeahead-0.10.5.min.cache.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/5E35D07B5D1913F943BD3FF64D140ED4.cache.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/clear.cache.gif 404 (Not Found)
GET http://localhost:5173/fonts/RedHatDisplay-Medium.woff2 net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/RedHatDisplay-Medium.woff net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/overpass-light.woff2 net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/overpass-light.woff net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/RedHatText-Regular.woff2 net::ERR_ABORTED 404 (Not Found)
GET http://localhost:5173/fonts/RedHatText-Regular.woff net::ERR_ABORTED 404 (Not Found)

型
（为清晰起见编辑;超过1000行的错误消息不是很有用。）
那么，问题出在哪里呢：
1.它尝试从文档根目录/而不是/node_modules加载。
1.在库的package.json中，这些都没有作为依赖项找到。
如前所述，我使用Vite，而库使用Webpack。我不知道这有没有区别。
任何帮助都是非常感激的。
编辑：更新为@kie-tools/kie-editors-standalone而不是@kogito-tooling/kie-editors-standalone，但这并没有什么区别。