vue中使用mavon-editor,关闭cdn加载,使用本地按需加载

官方解决方式

官方的解决方式=>

官方的解决方式获取不到highlight代码段的css,而且没有配置公共路径,导入的资源也过多
只能获取到node_modules/mavon-editor/dist/highlightjs,但是获取不到node_modules/mavon-editor/dist/highlightjs/style,导致缺少代码段的css,手动import导入

个人修改

在vue.config.js中

module.exports = {
    
    
  configureWebpack: {
    
    
    plugins: [
      // ...
      new CopyWebpackPlugin([
        {
    
    
          from: 'node_modules/mavon-editor/dist/highlightjs/highlight.min.js',
          to: path.resolve(__dirname, 'dist/markdown/highlightjs') // 插件将会把文件导出在dist/markdown/xxx
        },
        {
    
    
          from: 'node_modules/mavon-editor/dist/markdown',
          to: path.resolve(__dirname, 'dist/markdown/markdown')
        },
        {
    
    
          from: 'node_modules/mavon-editor/dist/katex', 
          to: path.resolve(__dirname, 'dist/markdown/katex')
        }
      ])
      // ...
    ]
  }
};

在需要使用mavon-editor的组件中。代码片段使用github,其余主题替换相应位置

注意:部署后公共路径的修改,vue.config.js的publicPath不会作用在这里

<mavon-editor
  v-model="blog.content"
  :subfield="false"
  codeStyle="github"
  :externalLink="externalLink"
  :ishljs="true"
/>
// 自行导入样式
import '@/assets/markdown/github.css';

let publicPath = '';
if (process.env.NODE_ENV === 'production') {
    
    
  publicPath = '/public';
}
export default {
    
    
  name: 'Blog',
  data() {
    
    
    return {
    
    
      blog: {
    
    },
      code_style: 'github',
      externalLink: {
    
    
        markdown_css: function() {
    
    
          // 这是你的markdown css文件路径
          return publicPath + '/markdown/markdown/github-markdown.min.css';
        },
        hljs_js: function() {
    
    
          // 这是你的hljs文件路径
          return publicPath + '/markdown/highlightjs/highlight.min.js';
        },
        hljs_css: false,
        katex_css: function() {
    
    
          // 这是你的katex配色方案路径路径
          return publicPath + '/markdown/katex/katex.min.css';
        },
        katex_js: function() {
    
    
          // 这是你的katex.js路径
          return publicPath + '/markdown/katex/katex.min.js';
        }
      }
    };
  },

猜你喜欢

转载自blog.csdn.net/weixin_43792004/article/details/111186611