Vue中使用mathJax（含样例）到此为止，就能渲染成想要的样子了。

1、引入CDN

将CDN链接地址插入到项目的index.html中，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>XXX后台管理系统</title>
    <link rel="dns-prefetch" href="//cdn.bootcss.com" />
    <script type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2、配置mathJax Config

可以在util包或者assert包下添加文件globalVariable.js,写入如下内容：

let isMathjaxConfig = false;//用于标识是否配置
const initMathjaxConfig = () => {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Config({
    showProcessingMessages: false, //关闭js加载过程信息
    messageStyle: "none", //不显示信息
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
      displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
      skipTags: ["script", "noscript", "style", "textarea", "pre"] //避开某些标签
    },
    "HTML-CSS": {
      availableFonts: ["STIX", "TeX"], //可选字体
      showMathMenu: false //关闭右击菜单显示
    }
  });
  isMathjaxConfig = true; //配置完成，改为true
};
const MathQueue = function (elementId) {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);//这里可以用原生的js调用name,class,id。
};
export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue,
}

3、加入main.js

配置如下：

// 引入数学公式渲染
import globalVariable from './utils/globalVariable'
Vue.prototype.commonsVariable = globalVariable;

4、使用

在要渲染公式的div上添加id，并将渲染内容加载到div下，如下所示：

 <div id="questionDiv">
 	<div v-html="content"></div>
 	<div v-html="analysis"></div>
 </div>

content是题干，analysis是解析对应内容如下：

(2012•北京)已知集合A&#61;{x∈R|3x&#43;2&#xff1e;0}&#xff0c;B&#61;{x∈R|(x&#43;1)(x-3)&#xff1e;0}&#xff0c;则A∩B&#61;( )<br/>A. (-∞&#xff0c;-1)<br/>B. (-1&#xff0c; \( - \frac{2}{3} \) )<br/>C. ﹙ \( - \frac{2}{3} \) &#xff0c;3﹚<br/>D. (3&#xff0c;&#43;∞)

解&#xff1a;因为B&#61;{x∈R|(x&#43;1)(x-3)&#xff1e;0﹜&#61;{x|x&#xff1c;-1或x&#xff1e;3}&#xff0c; <br />又集合A&#61;{x∈R|3x&#43;2&#xff1e;0﹜&#61;{x|x \( &gt;- \frac{2}{3} \) }&#xff0c; <br />所以A∩B&#61;{x|x \( &gt;- \frac{2}{3} \) }∩{x|x&#xff1c;-1或x&#xff1e;3}&#61;{x|x&#xff1e;3}&#xff0c; <br />故选&#xff1a;D&#xff0e;

渲染需要在每次获得要渲染的内容之后进行渲染

    /**
     * 获取试题信息
     */
    getQuestionList() {
      loadQuestion(this.question.id).then(response => {
        const question = response.data;
        if (question) {
          this.content = question.content;
          this.analysis = question.analysis;
          this.$nextTick(function () { //这里要注意，使用$nextTick等组件数据渲染完之后再调用MathJax渲染方法，要不然会获取不到数据
            if (this.commonsVariable.isMathjaxConfig) {//判断是否初始配置，若无则配置。
              this.commonsVariable.initMathjaxConfig();
            }
            this.commonsVariable.MathQueue("questionDiv");//传入组件id，让组件被MathJax渲染
          })
        }
      })
    }

到此为止，就能渲染成想要的样子了。