Vue组件无法加载public/index.html引入的外部MathJax脚本如何解决

问题原因 #

• 变量名拼写错误：MathJax加载完成后挂载到全局的对象名为 MathJax（J为大写），你的代码中写为 Mathjax（j小写），因此直接触发未定义报错。
• 异步加载时序问题：你引入MathJax的script标签添加了async属性，脚本会异步加载，不会阻塞页面后续逻辑执行。很可能组件触发watch执行排版方法时，MathJax脚本还未加载完成，全局对象还未挂载，就算拼写正确也会出现未定义报错。
• 额外注意：Vue单文件组件的运行环境默认会将未显式声明的变量判定为局部变量，直接调用MathJax不会默认从全局window对象取值，也可能导致报错。

解决方案 #

1. 修正拼写，并且显式从window对象取值，同时添加存在性判断避免脚本未加载完成时报错：

watch: {
  note_content: function() {
    // 先判断全局MathJax是否存在再调用
    if (window.MathJax) {
      window.MathJax.typesetPromise()
    }
  }
}

2. 如果你需要确保MathJax加载完成后才执行第一次排版，可以选择两种方案：
   • 去掉script标签的async属性，改为同步加载，缺点是会阻塞页面首次渲染
   • 在全局监听MathJax的加载完成事件，添加加载完成标记，组件中等待标记为true后再执行排版逻辑

内容的提问来源于stack exchange，提问作者vkubicki