在 vue 组件中加载美人鱼 (webpack)

问题描述

我正在将一个使用美人鱼的 vue 项目从 CDN 迁移到 webpack。我对它完全陌生。我在项目文件夹中做了 npm install save mermaid。

如果我将美人鱼 CDN 加载为静态 js（在 /public/index.html 中），它会因某些图表而崩溃（显示炸弹图标，表示语法错误）

如果在 webpack 中，它不会显示任何美人鱼图，但似乎加载为空（使用浏览器工具检查生成的 html）。没有控制台错误

<svg id="mermaidChart0" width="100%" xmlns="http://www.w3.org/2000/svg"><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"></g></g></g></svg>

尝试过： //package.json

...
  "dependencies": {
    "axios": "^0.21.0","core-js": "^3.6.5","mermaid": "^8.8.2",

并在 component.vue 中

<template>
...
      <div class="mermaid m-5">
        graph LR

        B(dsfgdsfgsd <br>) --> Bo(gdfshfghfdh <br>)
...


<script>

    import mermaid from 'mermaid'
    
    export default {
      data: function() {
        return {}
      },mounted() {
        this.init();
      },methods: {
        init: function() {
          mermaid.initialize({
            theme: 'forest',htmlLabels: true,//startOnLoad: true
          });
          console.log(mermaid);
          mermaid.init(undefined,document.querySelectorAll('.mermaid'));
        }
      }
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）