vue-cli中使用mathjax

解决mathjax动态修改页面和在vue-cli中使用

我在第三方公司返回的数据中发现要用到mathjax，也是第一次碰到，于是百度了它的用法。

第一个遇到的问题是引入cdn后可以渲染初始的页面，但当动态渲染后，修改的页面就不会被mathjax重

新排版，下面是我的解决方案

updated() {
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML", function () {
        MathJax.Hub.Config({ tex2jax: { inlineMath: [['$', '$'], ['_$', '_$'], ['$$', '$$'], ['\\(', '\\)']] } });
        // entry-content是文章页的内容div的class
        let math = document.getElementsByClassName("myapp1")[0];
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, math]);
    });
},

其中

['$', '$'], ['_$', '_$'], ['$$', '$$'], ['\\(', '\\)']]
document.getElementsByClassName("myapp1")[0];

是需要根据需求配置的，其他都是复制别人的^ ^

这些我都在单页面的的xx.html中实现了，然后我准备移到我的vue项目中（vue-cli开发），

首先引入jquery（为的使用$.getScript这个方法，其实就是加载url后有一个回调函数，也可以自己用别

的方法写），然后复制页面、方法。

这时上面代码中的MathJax对象会报错（错误：MathJax is undefinde），需要将MathJax改为

window.MathJax。可以打印window查看该对象

updated() {
  this.$jquery.getScript('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML', function() {
    window.MathJax.Hub.Config({ tex2jax: { inlineMath: [['$', '$'], ['_$', '_$'], ['$$', '$$'], ['\\(', '\\)']] }})
    const math = document.getElementsByClassName('bottom')[0]
    window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, math])
  })
},

坑：npm install mathjax 后 import mathjax from ‘mathjax’ 在vue-cli中会直接报错（mathjax is

undefind），我查看mode_modules中的mathjax ，它的启动文件指向一个node-main.js文件，内容大

致是 (function(){})()， 是没有导出的

标签：vue,cli,Hub,MathJax,window,mathjax,页面
来源： https://blog.csdn.net/shi0804yi/article/details/121856041