vue.jsでmarkdownファイル(.mdファイル)を読み込んで使用したいです。
個人的に調べたところ、mdファイルを読み込むためにはローダーの設定が必要だということはわかったのですが、そのローダーの設定がうまくいきません。
※以下エラーが発生
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
○環境
vue: 3.3.0
vue-md-loader: "^1.1.0"
※mdファイル用ローダーのモジュール
marked: "^0.6.0"
※mdファイルをhtmlに変換するモジュール
○vue.config.js
※参考URL:https://cli.vuejs.org/guide/webpack.html#chaining-advanced
js
1//vue.config.js 2const path = require("path"); 3 4module.exports = { 5 chainWebpack: config => { 6 config.module 7 .rule("md") 8 .test(/.md$/) 9 .use("vue-md-loader") 10 .loader("vue-md-loader") 11 .end(); 12 } 13}; 14
○mdファイルを使用したいvue
vue
1<template> 2 <div class="hoge"> 3 <div>{{ html }}</div> 4 </div> 5</template> 6 7<script> 8import Marked from "marked"; 9import Md from "@/components/hoge.md"; 10 11export default { 12 name: "hoge", 13 computed: { 14 html() { 15 return Marked(Md); 16 } 17 } 18}; 19</script> 20
mdファイルを読み込んで使用するためにはどうすればよいかご助言頂けますと幸いですm(_ _)m
あなたの回答
tips
プレビュー