如何在vue.js 2中使用mathjax？

Question

我的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>

但是我在MathMenu.js上收到了“ Uncaught SyntaxError：Unexpected token <”（未捕获的SyntaxError：意外的令牌<）？V = 2.7.2：1如何正确使用mathjax？

Answer 1

我认为您无法导入mathjax，因为如果我控制台导入了mathjax的日志，则显示空对象。我也浏览了似乎不可导入的文件夹目录。因此，您需要手动将scriptsrc指向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>

通过使用变量保存布尔值（无论是否已渲染mathjax），可以使情况变得更好一些，因为需要为两个watch值调用渲染，这两个watch值可能在浏览器刷新时触发。