Javascript 导入.md文件以呈现vue模板时出错

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

从“Vue”导入Vue
从“vue标记”导入VueMarkshow
从“./README.md”导入mdFile
导出默认值{
名称：“VueMarkdown”，
组件：{VueMarkshow}，
}

但它得到了错误：

[Vue warn]：无法解析异步组件：函数（）{
返回模块.dynamicImport（'./Vue Markdown.Vue'）；
}
原因：错误：找不到模块'./README.md'

有两种解决方案：

不要把流星用于建筑 此解决方案有两个步骤：

1） 用网页包取代Meteor建筑系统

2） 使用加载器对网页包进行降价

在后端加载标记文件 这更容易实现，我有我的代码示例：

1） 在前面，我显示从标记中计算出的html

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

当

标记时

是将标记转换为html的库

import marked from "marked";

3） 我的

文档内容

是从后端加载的：

  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

---

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

import mdFile from './README.md'

因为导入只针对javascript代码。-所以我们需要以其他方式读取文件

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

但是，您可以从/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的“source”参数中

以下是我已经测试过的完整代码，它可以正常工作：

<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>

---

我为此挣扎了一段时间，但最终还是放弃了。我怀疑您的问题是您没有md文件的加载程序。我使用了纯Vue CLI，收到了所有错误“您可能需要一个合适的加载程序来处理此文件类型”。Vue CLI可以工作，但当我在

Meteor

项目中使用时，它不工作，我使用了原始加载程序配置

webpack.config.js

，我不知道我的配置有错。

<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>

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