方法一、引用外网的地址
第一步：在public/index.html中引入地址
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/><link rel="icon" href="<%= BASE_URL %>favicon.ico" /><title><%= webpackConfig.name %></title></head><body><noscript><strong>We're sorry but <%= webpackConfig.name %> doesn't work properly withoutJavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="Chat.js"></script><script type="text/x-mathjax-config">MathJax.Hub.Config({showProcessingMessages: false, //关闭js加载过程信息messageStyle: "none", //不显示信息extensions: ["tex2jax.js"],jax: ["input/TeX", "output/HTML-CSS"],tex2jax: {inlineMath: [ ['$','$'], ["\\(","\\)"] ],displayMath: [ ['$$','$$'], ["\\[","\\]"] ],skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code', 'a', 'annotation', 'annotation-xml'],ignoreClass: 'crayon-.*' // 'crayon-' 开头的类，属于Wordpress代码高亮库，这部分不需要处理，否则会导致显示不正确,这部分是正则式，多条之间用'|'分割},'HTML-CSS': {showMathMenu: false //禁用右键菜单}});MathJax.Hub.Queue(["Typeset",MathJax.Hub]);</script><script src="https://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!-- 加速网络 --><link rel="dns-prefetch" href="https://cdn.mathjax.org" /></body>
</html>
第二步：在utils下创建配置文件Mathjax.js
// 这个是使用这个地址的配置写法http://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML
let isMathjaxConfig = false; //用于标识是否配置
const initMathjaxConfig = () => {if (!window.MathJax) {return;}window.MathJax.Hub.Config({
showProcessingMessages: false, // 关闭js加载过程信息
messageStyle: "none", // 不显示信息extensions: ["tex2jax.js"],jax: ["input/TeX", "output/HTML-CSS"],showMathMenu: false,tex2jax: {inlineMath: [["$", "$"],["\\(", "\\)"],],displayMath: [["$$", "$$"],["\\[", "\\]"],],processEscapes: true,
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]); //整个dom下渲染// window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]); //固定id元素渲染，
};export default {isMathjaxConfig,initMathjaxConfig,MathQueue,
};
第三步：main.js中全局引入
import mathJax from "@/utils/MathJax";
Vue.prototype.mathJax = mathJax;第四步：页面使用
<template><div id="Mindopt" class="Mindopt"><div v-html="val"></div></div>
</template><script>
export default {data () {return {val: `$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$`,}},created () {this.getmathJax();},methods: {getmathJax () {this.$nextTick(function () {if (this.mathJax.isMathjaxConfig) {//判断是否初始配置，若无则配置。this.mathJax.initMathjaxConfig();}this.mathJax.MathQueue("Mindopt");//传入组件id，让组件被MathJax渲染});},}
}
</script><style lang="scss">
</style>方法二、下载到本地使用
我原先想放入src/assets中，然后在页面中引入import '@/assets/mathjax/es5/tex-mml-chtml'，但是会报以下错，不知道啥原因。
所以我只能放入到public下，在index.html中引入文件。
还有就是，行内公式使用$公式$，不生效，右键菜单也不能禁用，加了showMathMenu: false也不禁用，不知道为啥
第一步：下载
npm i mathjax@3第二步：将下载到node_modules/mathjax整个文件放置到public下
第三步：index.html中引入js文件
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/><link rel="icon" href="<%= BASE_URL %>favicon.ico" /><!-- mathjax.js --><scriptsrc="./js/mathjax/es5/tex-mml-chtml.js"id="MathJax-script"async></script><title><%= webpackConfig.name %></title></head><body><noscript><strong>We're sorry but <%= webpackConfig.name %> doesn't work properly withoutJavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body>
</html>
第四步：在utils下创建配置文件Mathjax.js
// 这个是使用这个地址的配置写法（包括本地）https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
let isMathjaxConfig = false; // ⽤于标识是否配置
const initMathjaxConfig = () => {if (!window.MathJax) {return;}window.MathJax = {tex: {inlineMath: [["$", "$"],["\\(", "\\)"],], // ⾏内公式选择符displayMath: [["$$", "$$"],["\\[", "\\]"],], // 段内公式选择符},options: {skipHtmlTags: ["script","noscript","style","textarea","pre","code","a",], // 避开某些标签ignoreHtmlClass: "tex2jax_ignore",processHtmlClass: "tex2jax_process",},};isMathjaxConfig = true; // 配置完成，改为true
};
const TypeSet = async function (elementId) {if (!window.MathJax) {return;}window.MathJax.startup.promise = window.MathJax.startup.promise.then(() => {return window.MathJax.typesetPromise();}).catch((err) => console.log("Typeset failed: " + err.message));return window.MathJax.startup.promise;
};
export default {isMathjaxConfig,initMathjaxConfig,TypeSet,
};第五步：main.js中全局引入
import mathJax from "@/utils/MathJax";
Vue.prototype.mathJax = mathJax;第六步：页面使用
<template><div id="Mindopt" class="Mindopt"><div v-html="val"></div></div>
</template><script>
export default {data () {return {val: `$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$`,}},created () {this.getmathJax();},methods: {getmathJax () {this.$nextTick(function () {if (this.mathJax.isMathjaxConfig) {// 判断是否初始配置，若⽆则配置。this.mathJax.initMathjaxConfig()}this.mathJax.TypeSet()});},}
}
</script><style lang="scss">
</style>
![NSSCTF练习记录：[SWPUCTF 2021 新生赛]include](https://i-blog.csdnimg.cn/direct/7b05761747f541c095722761540bfc40.png)
