如何将mathjax与vue.js 2一起使用？

My package.json：

  "dependencies": {
    "bootstrap": "^3.3.7",
    "mathjax": "^2.7.2",
    "vue": "^2.5.2",
    "vue-moment": "^3.1.0",
    "vue-router": "^3.0.1"
  },

我有一个组成部分：

<template>
  <div class="post--body" v-html="previewText" id="post--body"></div>
</template>

<script>

import MathJax from 'mathjax'

export default {
  name: 'blog-post',
  data () {
    return {
      post: {body: ""}
    }
  },
  mounted() {
    fetch("/api/post/" + this.$route.params.id)
        .then(response => response.json())
        .then(data => {
            this.post = data;
        })
    this.$nextTick(function () {
      console.log("tick")
      MathJax.Hub.Typeset()   
    })
  },
  computed: {
    previewText () {
      return this.post.body
    } 
  }
}
</script>

从“MathJax”导入MathJax
导出默认值{
名称：'博客帖子'，
数据（）{
返回{
帖子：{正文：}
}
},
安装的（）{
fetch（“/api/post/”+this.$route.params.id）
.then（response=>response.json（））
。然后（数据=>{
this.post=数据；
})
此.$nextTick（函数（）{
控制台日志（“勾选”）
MathJax.Hub.Typeset（）
})
},
计算：{
预览文本（）{
把这个寄回来
} 
}
}

---

但是我得到了“Uncaught SyntaxError:uncontracted token我认为你不能导入

mathjax

，因为如果我控制台记录导入的mathjax，它会显示空对象。我也查看了文件夹目录，它似乎不可导入。所以你需要手动将

脚本

src指向mathjax.js

我目前在vue中使用Mathjax的方式是制作一个自定义全局组件

<template>
  <span ref="mathJaxEl" v-html="data" class="e-mathjax"></span>
</template>
<script type="text/javascript">
  export default{
  props:['data'],
  watch:{
    'window.MathJax'(val){
        this.renderMathJax()
    },
    'data'(val){
        this.renderMathJax()
    }
   },
  mounted(){
    this.renderMathJax()
  },
  methods:{
    renderMathJax(){
        if(window.MathJax){
window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub,this.$refs.mathJaxEl]);
    }
  }
}
}
</script>

导出默认值{
道具：[“数据”]，
观察：{
'window.MathJax'（val）{
this.renderMathJax（）
},
“数据”（val）{
this.renderMathJax（）
}
},
安装的（）{
this.renderMathJax（）
},
方法：{
renderMathJax（）{
if（window.MathJax）{
Queue（[“Typeset”，window.MathJax.Hub，this.$refs.mathJaxEl]）；
}
}
}
}

---

通过使用一个变量来保存布尔值，无论mathjax是否已渲染，都可以做得更好，因为会为两个监视值调用渲染，这两个值都可能在浏览器刷新时触发。

因此，对于mathjax v3，只需将以下内容添加到vue组件中

mounted(){
    MathJax.typeset();
},

---

现在，当通过Vue路由器导航到页面时，数学将在组件装载时呈现。

您导入

MathJax

，但尝试使用

MathJax

。请给我一个示例导入的变量名为

MathJax

，但您将其指定为

MathJax

，这是不同的。尝试执行

MathJax.Hub.Typeset（）

我更新了我的代码，但无论如何，我得到了一个错误，但另一个错误