关于vue中使用v-html无法正常解析mathjax问题

1.首先需要在index.html中加入几行代码

        if(MathJax){
          MathJax.Hub.Config({
            jax: ["input/TeX","output/HTML-CSS", "output/PreviewHTML"],  //输出格式配置：latex 解析为 DOM结构
            tex2jax: {
              inlineMath: [['$','$']],
              displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
            },
            "HTML-CSS": {
              showMathMenu: false,            // 隐藏右键菜单展示
              linebreaks: {
                automatic: true,  //超长公式换行处理（默认是false不换行）
                width: "80%"      //设置换行的点，默认是遇到等号=换行
              }
            },
          });
        }
    </script>

2.然后新建文件mathjax.js

const initMathjaxConfig = () => {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    showMathMenu: false,
    tex2jax: {
      inlineMath: [
        ['$', '$'],
        ["\\(", "\\)"]
      ],
      displayMath: [
        ['$$', '$$'],
        ["\\[", "\\]"]
      ],
      processEscapes: true
    },
    "HTML-CSS": {
      availableFonts: ["TeX"]
    },
  });
  isMathjaxConfig = true; //配置完成，改为true
};

const MathQueue = function (elementId) {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub]); //整个dom下渲染
  // window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]); //固定id元素渲染，
};

export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue
}

3.在需要显示mathjax公式的组件中引入使用

//引入
import MathJax from "@/utils/MathJax";
//然后在拿到富文本数据v-html渲染之后，执行formatMath方法解析
formatMath() {
      let that = this;
      setTimeout(function () {
        that.$nextTick(function () {
          if (MathJax.isMathjaxConfig) {
            //判断是否初始配置，若无则配置。
            MathJax.initMathjaxConfig();
          }
          MathJax.MathQueue("contents"); //传入组件id，让组件被MathJax渲染
        });
      }, 500);
    }