如何借助raw-loader在value组件中导入和使用bpmn文件

Question

我是bpmn-js的新手，并尝试在vue.js组件(BPMNViewer.vue)中导入和使用.bpmn文件。我的研究只提到了使用原始装载器。所以我有点不知所措。

<script>
import demo from './examples/demo.bpmn'
...
export default {
data() {
return {
xmlData: demo,
};
}
}

这会导致以下错误:

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中集成原始加载器:

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:

{
"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"
}
}

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

Answer 1

这看起来不是Bpmn-js特有的。您能否首先确保原始XML在xmlData对象中确实可用?

你的webpack可能没有被配置为使用raw-loader，或者没有为.bpmn扩展名使用它。内联解决方案是

ìmport demo from 'raw-loader!./examples/demo.bpmn'

(如果你还没有原始加载器:npm install raw-loader——save-dev