導入 .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