vue-cli 中如何使用 mavon-editor关闭CDN, 使用本地加载
经过测试,官方的办法不能引入highlightjs/styles/github.min.css
,所以导致代码片段不能添加高亮的样式
因此,直接改成使用 css 的 @import url()
方法来引入
另外,不需要按照官方的办法使用copy-webpack-plugin
将代码从 /node_modules
复制到 /dist
下。
因为 vue-cli 中打包的时候,/public
下的内容会直接放到打包后的 /dist
目录下,因此,我们直接从浏览器的 source 下把代码复制到项目的 /public
就可以,然后使用的时候直接使用绝对地址。
其中我的public下的目录结构是这样的
public
├── index.html
├── cdn-lib
├── highlight
├── highlight.min.js
├── styles
├── github.min.css
├── markdownCss
├── github.markdown.css
├── github.markdown.min.css
├── KaTex
├── katex.min.js
├── katex.min.css
然后我们在控制台运行npm run build
执行完以后就发现dist下面会生成同样的目录
因为在部署的时候,dist是前端项目的根目录,即,index.html 所在的目录
那么我们在代码里可以直接使用以 \
开头的绝对路径
代码如下
<template>
<mavon-editor
:value="value"
:subfield="false"
:defaultOpen="'preview'"
:ishljs="true"
:externalLink="externalLink"
/>
</template>
export default {
data(){
return {
value: '一段markdown文本',
externalLink = {
markdown_css: function() {
// 这是你的markdown css文件路径
return '/cdn-lib/markdownCss/github-markdown.min.css'
},
hljs_js: function() {
// 这是你的hljs文件路径
return '/cdn-lib/highlight/highlight.min.js'
},
katex_css: function() {
// 这是你的katex配色方案路径路径
return '/cdn-lib/KaTex/katex.min.css'
},
katex_js: function() {
// 这是你的katex.js路径
return '/cdn-lib/KaTex/katex.min.js'
}
}}
}
}
<style>
@import url(/cdn-lib/highlight/styles/github.min.css);
</style>