导入 .md 文件错误以渲染 vue 模板

Question

我基于Meteor + Vue 。 我尝试导入 .md 文件来呈现 vue 模板。

<template>
       <VueMarkshow :source="mdFile"></VueMarkshow>
</template>

<script>
import Vue from 'vue'
import VueMarkshow from 'vue-markdown'

import mdFile from './README.md'
export default {
  name: 'VueMarkdown',
  components:{VueMarkshow},
}
</script>

但它得到错误：

 [Vue warn]: Failed to resolve async component: function () {
    return module.dynamicImport('./Vue-Markdown.vue');
  }
Reason: Error: Cannot find module './README.md'

Answer 1

有两种解决方案：

不要使用 Meteor 进行建筑

此解决方案有两个步骤：

1) 用 webpack 替换 Meteor 构建系统

https://medium.com/the-guild/meteor-with-webpack-in-2018-faster-compilation-better-source-handling-benefit-from-bc5ccc5735ef

2）使用loader进行webpack的markdown

https://www.npmjs.com/package/markdown-loader

在后端加载降价文件

这更容易实现，我有我的代码示例：

1）在前面我显示从降价计算的html

              <div v-html="compiledMarkdown"></div>

2）我已经定义了计算属性：

  computed: {
    compiledMarkdown: function() {
      return marked(this.DOC_CONTENT, { sanitize: true });
    },
  },

marked是将 Markdown 转换为 html 的库

import marked from "marked";

3) 我的DOC_CONTENT从后端加载：

  created() {
    Meteor.call("get_docs", (err, res) => {
      this.DOC_CONTENT = res;
    });
  },

4）在后端有定义的方法

Meteor.methods({
  'get_docs'() {
    return Assets.getText("CHANGELOG.md");
  }
})

5）我的文件CHANGELOG.md位于meteor项目根目录的/private文件夹中。

/private/CHANGELOG.md

Answer 2

您不能像这样导入普通文件：

import mdFile from './README.md'

因为import仅适用于 javascript 代码。 - 所以我们需要以其他方式读取文件。

从客户端 javascript 代码读取文件并不是特别容易。 您可以使用 FileReader，这是 HTML5 的东西，但您不能要求直接读取文件 - 出于安全原因，您必须首先从文件<input>要求文件。

但是，您可以从 /public 文件夹中读取文件。 因此，如果您的 README.md 在您的 /public 文件夹中，您可以按如下方式执行 ajax 请求：

       var client = new XMLHttpRequest();
       client.open('GET', '/README.md');
       let self = this;
       client.onreadystatechange = function() {
           self.mdFile = client.responseText;
       }
       client.send();

然后你需要一个变量（我称之为mdFile ）来保存 data() 函数中 ajax 调用的字符串结果，然后我们将把它放在vue-markdown的“源”参数中。

这是我测试过的完整代码，它可以工作：

<template name="appLayout">

    <div>
        <vue-markdown :source="mdFile"></vue-markdown>
    </div>
</template>

<script>

    import {Meteor} from 'meteor/meteor';
    import VueMarkdown from 'vue-markdown';

   export default {
       data() {
           return {
               mdFile: '',
           };
       },
       components: {
           VueMarkdown
       },
       created() {
           var client = new XMLHttpRequest();
           client.open('GET', '/README.md');
           let self = this;
           client.onreadystatechange = function() {
               self.mdFile = client.responseText;
           }
           client.send();
       },
   }


</script>

请注意 vue-markdown 与 babel 有一些奇怪的问题，并且在 github 中仍然存在一个旧错误。 我发现我必须安装 babel-runtime 两次：

meteor npm install --save @babel/runtime
meteor npm install --save babel-runtime