我刚刚尝试使用 vue-katex 模块https://www.npmjs.com/package/vue-katex。
我使用 vue-cli 设置了一个简单的示例
$ vue init webpack-simple my-project
然后我添加了vue-katex包，添加了几行代码，将一些 KaTeX 数学内容放在页面上，并启动了我的开发服务器。但是，数学符号显示不正确，我的页面上显示了一个大黑框。
这是我的 package.json 的相关部分：
"dependencies": {
"vue": "^2.5.11",
"vue-katex": "^0.1.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
这是我的应用程序代码（我尝试直接从上面的 vue-katex npm 页面获取代码）：
<template>
<div id="app">
<div v-katex:display="'\\frac{a_i}{1+x}'"></div>
<img src="./assets/logo.png">
...
</div>
</template>
<script>
import Vue from 'vue';
import VueKatex from 'vue-katex';
Vue.use(VueKatex);
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
以及结果截图：
你可以看到数学没有渲染，我得到了这个奇怪的大黑盒子。我已经包含了开发工具检查，以尝试使其更容易诊断。
我试图让一切尽可能简单——如果有人能告诉我我做错了什么，我将不胜感激！
提前谢谢了，