Mathjax加载慢，如何在Nuxt中加载本地JS文件

在 Vue或Nuxt中如何渲染数学公式？，我们说明了如何在Nuxt中使用Mathjax来渲染数学公式。然而使用CDN来加载Mathjax简单是简单，但是它会降低网页的性能。换句话说，使用CDN加载的Mathjax可能会比较慢。

想要解决这个性能问题，其中一种解决办法就是本地加载Mathjax。你可以用npm来将Mathjax安装到你的项目中去

npm install mathjax@4.0.0-beta.6

然而在Nuxt中，你很难去整合Mathjax，不仅因为关于这方面的资料很少，而且跟着Mathjax的官方文档走可能对于Nuxt没有什么用。

因此，只有一种办法并且它足够简单：本地加载Mathjax的JS文件。也就是说，你继续用CDN的方式去加载Mathjax，但是是加载Mathjax的本地JS文件。具体步骤分为以下几步：

1. 先在 MathJax v4.0.0-beta.6 下载Mathjax的源代码。
2. 将所有Mathjax的文件都放进public/mathjax这个目录中。注意，如果你使用的是VSCode来编写Nuxt项目，那么请看 VSCode报错: To enable project-wide JavaScript/TypeScript language features, exclude large folders… 来避免一个重要的错误。
3. 修改你的nuxt.config.ts文件：

head: {
    link: [{
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.png'
    }],
    script: [
        {
          type: "text/javascript",
          id: "MathJax-script",
          async: true,
          src: "/mathjax/tex-chtml.js",
          tagPosition: "bodyClose",
        },
        {
          innerHTML:
            "MathJax = {tex: {inlineMath: [['$', '$'],['$$', '$$']]}};",
        },

    ]
}

原文地址：Mathjax loads slow. How to load local JS file with Nuxt?
更多各领域的原创文章：弦圈- 找到属于你的圈子,让知识无荒原
百科全书：弦圈百科
个人生活、经验分享：弦圈社区