Vue3+bpmn.js中引入.bpmn遇到的问题

    

1. vue create XXX
2. npm install
3. npm run serve
4. 安装bpmn.js：

npm i bpmn-js --save-D

1. index.vue中的代码

<template>
  <div id="canvas"></div>
</template>
<script setup lang="ts">
import BpmnViewer from 'bpmn-js';
import { onMounted, ref } from 'vue';
onMounted(() => {
  const viewer = new BpmnViewer({
    container: '#canvas'
  });
  const bpmnXml = require('@/assets/test.bpmn');
  console.log(bpmnXml);
  viewer.importXML(bpmnXml).then((result) => {
    const { warnings } = result;
    console.log(viewer.get('canvas'));
    viewer.get('canvas').zoom('fit-viewport');
  }).catch(function (err) {
    const { warnings, message } = err;
    console.log('something went wrong:', warnings, message);
  });
})
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#canvas {
  height: 400px;
}
</style>

vue3在引入 .bpmn文件时报错

ERROR in ./src/assets/test.bpmn 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" encoding="UTF-8"?>
| <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:zeebe="http://camunda.org/schema/zeebe/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_0z9crcu" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.10.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.2.0">
|   <bpmn:process id="test001" isExecutable="true">
 @ ./node_modules/@vue/cli-plugin-typescript/node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=script&setup=true&lang=ts 16:22-51
 @ ./src/components/HelloWorld.vue?vue&type=script&setup=true&lang=ts 1:0-291 1:0-291 1:292-572 1:292-572
 @ ./src/components/HelloWorld.vue 2:0-72 3:0-67 3:0-67 8:49-55
 @ ./node_modules/@vue/cli-plugin-typescript/node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&setup=true&lang=ts 2:0-53 10:6-16
 @ ./src/App.vue?vue&type=script&setup=true&lang=ts 1:0-275 1:0-275 1:276-540 1:276-540
 @ ./src/App.vue 2:0-65 3:0-60 3:0-60 8:49-55
 @ ./src/main.ts 2:0-28 3:10-13

解决方法：vue3中在vue.config.js配置webpack

configureWebpack: {
    module: {
      rules: [
        {
          test: /\.bpmn$/,
          type: 'asset/source'
        }
      ]
    }
  },

配置好之后再运行：

npm run serve

然后就成功了！！！！