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>

猜你喜欢

转载自blog.csdn.net/zhai_865327/article/details/115720313