Vue3前端项目渲染数学公式

1. 在pulic/index.html文件的body标签内添加如下内容：

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

2. 在src/utils文件夹中新建一个MathJax.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", "code", "a"] //避开某些标签
    },
    "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)]);
};


export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue,
}

3. 在math.js文件中引入MathJax.js，并挂载到Vue原型上，进行全局引入

import MathJax from './utils/MathJax';

// 在全局挂载 MathJax Vue3不能直接用Vue.prototype挂载全局属性或方法
const app = createApp(App);

app.config.globalProperties.$MathJax = MathJax;

4. 在需要的地方使用MathJax

//1. 在data中定义数学公式，注意数学公式需要用**$$**签后包裹，中间才是公式内容
data(){
	return{
		formula: '$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$',
	}
},
//2. 在页面创建的时候调用methods中的formatMath的方法
created(){
	this.formatMath();
},
methods:{
	formatMath(){
	  setTimeout(() => {
        this.$nextTick(() => {
          if (this.$MathJax.isMathjaxConfig) {
            this.$MathJax.initMathjaxConfig();
          }
          //这个地方的hello是对应要渲染数学公式的dom的class
          this.$MathJax.MathQueue('preCard');
        })
      }, 500)
	},
}

html部分代码如下：（但是class没有加hello的其他含公式文本也被渲染了，不太懂）

<div class="hello">{{ formula }}</div>

渲染效果如图：