vue 中 mavon-editor关闭默认的 CDN，使用本地资源加载

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

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: [
        new CopyWebpackPlugin([{
            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>
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>
// 这里引入缺失的 css
@import url(/cdn-lib/highlight/styles/github.min.css);
</style>

当然了，这是个不是办法的办法，就好在是个体力活，动手就行了，不用动脑子

写完以后测试一下，嗯～关机下班，一天的工资到手了 :)

vue 中 mavon-editor关闭默认的 CDN， 使用本地资源加载

vue 中 mavon-editor关闭默认的 CDN，使用本地资源加载