首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何借助原始加载器在vue组件中导入和使用bpmn文件

如何借助原始加载器在vue组件中导入和使用bpmn文件
EN

Stack Overflow用户
提问于 2022-05-16 14:53:21
回答 1查看 165关注 0票数 1

我对bpmn很陌生,并尝试在.bpmn组件(BPMNViewer.vue)中导入和使用一个BPMNViewer.vue文件。我的研究只是为了使用生料装载机。所以我有点不知所措。

代码语言:javascript
复制
<script>
import demo from './examples/demo.bpmn'
...

export default {
  data() {
    return {
      xmlData: demo,
    };
  }
}

这将导致以下错误:

代码语言:javascript
复制
error in ./src/views/BPMNViewer.vue?vue&type=script&lang=js&

Module not found: Error: Can't resolve './examples/demo.bpmn' in '/bpmn-test/src/views'

ERROR in ./src/views/BPMNViewer.vue?vue&type=script&lang=js& (./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BPMNViewer.vue?vue&type=script&lang=js&) 12:0-39

Module not found: Error: Can't resolve './examples/demo.bpmn' in '/bpmn-test/src/views'
 @ ./src/views/BPMNViewer.vue?vue&type=script&lang=js& 1:0-134 1:150-153 1:155-286 1:155-286
 @ ./src/views/BPMNViewer.vue 2:0-62 3:0-57 3:0-57 10:2-8
 @ ./src/router/index.js 3:0-48 12:15-25
 @ ./src/main.js 3:0-29 9:2-8
webpack compiled with 1 error

我尝试将原始加载程序集成到我的vue.config.js中:

代码语言:javascript
复制
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,

    chainWebpack: config => {
        config.module
            .rule("bpmn")
            .test(/\.bpmn$/)
            .use("raw-loader")
            .loader("raw-loader")
            .end();
    }
})

我的package.json:

代码语言:javascript
复制
{
  "name": "bpmn-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bpmn-js": "^7.3.1",
    "bpmn-js-cli": "^2.0.0",
    "bpmn-js-properties-panel": "^0.37.2",
    "camunda-bpmn-moddle": "^4.4.0",
    "diagram-js-minimap": "^2.0.3",
    "inherits": "^2.0.4",
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^1.1.3",
    "@vue/vue2-jest": "^27.0.0-alpha.2",
    "babel-jest": "^27.0.6",
    "cypress": "^8.3.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "raw-loader": "^3.1.0",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }
}

好像我错过了什么。如果我需要提供更多的信息,请告诉我。

EN

回答 1

Stack Overflow用户

发布于 2022-05-17 06:57:35

这看起来并不是Bpmn特有的。首先,您能确保xmlData对象中确实可以使用原始XML吗?

您的webpack可能不会被配置为使用原始加载程序或不将其用于.bpmn扩展。内联解决方案将是

代码语言:javascript
复制
ìmport demo from 'raw-loader!./examples/demo.bpmn'

(如果您还没有原始加载程序: npm安装原始加载程序-保存-dev)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72261201

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档