Vue HTML网页中数学符号未正常显示(MathJax)

第一步： 在index.html中引入mathjax

// index.html
<!--    数学公式转换 start-->
    <link rel="dns-prefetch" href="//cdn.mathjax.org" />
    <script type="text/javascript" src="http://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/x-mathjax-config">
        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>
    <!--    数学公式转换 end-->

第二步： 创建 MathJax.js 文件（在utils目录下）

// MathJax.js
let isMathjaxConfig = false;//用于标识是否配置
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
}

第三步： 在.vue页面中引入mathjax，并使用

import MathJax from '@/utils/MathJax'

在请求数据后，调用 this.formatMath()方法

/** 数学公式转换 在渲染列表方法结束之后，直接调用即可*/
formatMath() {
    let that = this;
    setTimeout(function () {
        that.$nextTick(function () {
            if(MathJax.isMathjaxConfig){//判断是否初始配置，若无则配置。
                MathJax.initMathjaxConfig();
            }
            MathJax.MathQueue("latexDiv");//传入组件id，让组件被MathJax渲染
        })
    },500);
},

例如：

<p class="latexDiv">$p(X)= \mathsf {P}(Y=1 \mid X)$</p>

参考：
1.网页中显示数学公式
2.html页面数学公式添加（附图）