如何解决在 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 举报,一经查实,本站将立刻删除。