not work under cli-3 in Prod about vue-markdown-loader

[sunshineshenjin]

@ohhoney1 :
Vue cli3 将vue-loader 版本降到@14.2.2 dev和production都可以用，感谢!

[Miaoxingren]

I found options missing when .md file contains vue template, so I forked the repo and made some changes.

In markdown-compiler.js:

module.exports = function(source) {
  ....

  var params = loaderUtils.getOptions(this) || {};
  var opts = {}

  if (params.vuemdrcPath) {
    opts = require(params.vuemdrcPath)
  } else {
    var vueMarkdownOptions = this._compilation.__vueMarkdownOptions__;
    opts = vueMarkdownOptions ? Object.create(vueMarkdownOptions.__proto__) : {}; // inherit prototype
    opts = Object.assign(opts, params, vueMarkdownOptions); // assign attributes
  }

  var preventExtract = false;

  if (opts.preventExtract) {
    delete opts.preventExtract;
    preventExtract = true;
  }

  ....
};

In project root, create .vuemdrc.js:

var mdItAnchor = require('markdown-it-anchor')
var slugify = require('transliteration').slugify

module.exports = {
  raw: true,
  use: [
    [mdItAnchor, {
      level: 2,
      slugify: slugify,
      permalink: true,
      permalinkBefore: true
    }]
  ]
}

In vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module.rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        vuemdrcPath: path.resolve(__dirname, '.vuemdrc.js')
      })
  }
}

It seems works with vue cli3 and vue loader 15.

[yolinsoft]

Set parallel: false in vue.config.js

[chiaweilee]

var loaderUtils = require('loader-utils');
var compiler = require('./markdown-compiler');

module.exports = function(source) {
  this.cacheable();

  var options = loaderUtils.getOptions(this) || {};
  Object.defineProperty(this._compilation, '__vueMarkdownOptions__', {
    value: options,
    enumerable: false,
    configurable: true
  })

  return compiler.call(this, source);
};

[showonne]

@chiaweilee How to solve this problem？

[rockyxia]

@chiaweilee How to solve this problem？

好了吗？

[chiaweilee]

@chiaweilee How to solve this problem？

好了吗？

Unfortunately not..

I forked and rewrite it myself @chiaweilee/vue-markdown-loader

[rockyxia]

@chiaweilee How to solve this problem？

好了吗？

Unfortunately not..

I forked and rewrite it myself @chiaweilee/vue-markdown-loader

How can I use it too?

[ohhoney1]

@chiaweilee How to solve this problem？

好了吗？

Unfortunately not..
I forked and rewrite it myself @chiaweilee/vue-markdown-loader

How can I use it too?

有两个思路：一个是fork份vue-markdown-loader，自己修改源码；
也可以把vue-loader依赖降至15版本以下，如@14.2.2

[chiaweilee]

check my updated repo @chiaweilee/vue-markdown-loader

Install

npm install @chiaweilee/vue-markdown-loader

Usage

Vue-cli 3.x

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@chiaweilee/vue-markdown-loader')
      .loader('@chiaweilee/vue-markdown-loader')
      .options({
        // options
      })
  }
}

Demo at @chiaweilee/vue-markdown-docs

[rockyxia]

check my updated repo @chiaweilee/vue-markdown-loader

Install

npm install @chiaweilee/vue-markdown-loader

Usage

Vue-cli 3.x

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@chiaweilee/vue-markdown-loader')
      .loader('@chiaweilee/vue-markdown-loader')
      .options({
        // options
      })
  }
}

Demo at @chiaweilee/vue-markdown-docs

thanks