mavon-editor 是一款开源的优秀的页面富文本编辑器，在很多 vue 项目中都有使用。
本文也是记录一次在使用 mavon-editor 的过程中，针对资源加载的问题再三思索（因为是内网项目）而得出的最终的解决方案，同时也是为有同样困扰的小伙伴提供更多的选择。
首先，这个问题出现在 v2.4.2 及以后的版本中，因为要优化插件的打包体积大小，因此，插件中默认不包含以下的几个依赖文件：
highlight.js（代码高亮）
github-markdown-css（流行的markdown 样式）
katex(V2.4.7)（markdown 语法拓展）
当我们的项目中使用 mavon-editor 的时候，这三个资源默认是从 CDN 引进来的，这就导致很多内网项目中，产生了诡异的问题，比如代码不能高亮了，选择好的样式不能生效了等等。
针对此问题，官方也给出了相应的解决方案，点击查看
基本就是手动添加一些 externalLink，感兴趣的伙伴自己看一下就好，我就不多赘述了。
经过我的测试呢，发现了几个问题
第一个问题是：官方提供的解决办法不能引入highlightjs/styles/github.min.css，所以导致 markdown中的代码片段不能添加高亮的样式。
代码不高亮，看起来很难受，因此，我们可以直接使用 css 的 @import url() 方法来引入缺失的 css 文件。
第二个问题是：官方说我们需要安装copy-webpack-plugin这个插件并且在 webpack 的配置文件中添加一些配置，如下：
module.exports={plugins:[newCopyWebpackPlugin([{from:'node_modules/mavon-editor/dist/highlightjs',to:path.resolve(__dirname,'../dist/highlightjs'),//插件将会把文件导出于/dist/highlightjs之下},{from:'node_modules/mavon-editor/dist/markdown',to:path.resolve(__dirname,'../dist/markdown'),//插件将会把文件导出于/dist/markdown之下},{from:'node_modules/mavon-editor/dist/katex',//插件将会把文件导出to:path.resolve(__dirname,'../dist/katex')}]),],}目的是把三个依赖文件抽离出来，放到 vue 项目打包后生成的 dist 目录下。
这就很麻烦了，因为大部分项目是 vue-cli 生成的，添加 webpack 配置我觉得很繁琐，另外每次打包要重新抽离依赖文件也让我难以接受。
有没有什么办法可以抄个近路呢？当然有了～
因为 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>exportdefault{data(){return{value:'一段markdown文本',externalLink={markdown_css:function(){//这是markdowncss文件路径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>//这里引入缺失的css@importurl(/cdn-lib/highlight/styles/github.min.css);</style>当然了，这是个不是办法的办法，就好在是个体力活，动手就行了，不用动脑子。写完以后测试一下，嗯～关机下班，一天的工资到手了～
作者：晴天同学