markdownファイルをvueコンポーネント内で読み込みたいのですが、パースに失敗してしまっているようで動きません。
以下のエラーの解決方法を教えてもらえますでしょうか。
参考サイト
https://qiita.com/seigo-pon/items/d2695e830e234b02cdbe
https://github.com/fengyuanchen/markdown-to-vue-loader
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <template>
| <div class="main"><h1>test markdown preview</h1>
| </div>
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/homeContent.vue?vue&type=script&lang=js& 10:0-38 22:20-22
@ ./src/components/homeContent.vue?vue&type=script&lang=js&
@ ./src/components/homeContent.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
@ ./src/views/Home.vue?vue&type=script&lang=js&
@ ./src/views/Home.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.30:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
vue.config.jsやpackage.json、サンプルのmarkdownファイルは以下になります。
vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('md')
.test(/\.md$/)
.use('vue-loader')
.loader('markdown-to-vue-loader')
.options({
exportSource: true,
})
.end();
},
devServer: {
watchOptions: {
ignored: /node_modules/,
},
},
};
package.json
{
"name": "example",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"element-ui": "^2.4.5",
"marked": "^0.6.2",
"vue": "^2.6.6",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.5.0",
"@vue/cli-plugin-eslint": "^3.5.0",
"@vue/cli-plugin-unit-jest": "^3.5.0",
"@vue/cli-service": "^3.5.0",
"@vue/eslint-config-prettier": "^4.0.1",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"file-loader": "^3.0.1",
"lint-staged": "^8.1.4",
"markdown-to-vue-loader": "^1.0.1",
"node-sass": "^4.9.2",
"sass-loader": "^7.1.0",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.5.21"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
# test markdown preview
回答よろしくお願いいたします
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
0
vue.config.jsで下のようにすればできました。
vue.config.js
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.md$/,
exclude: /node_modules/,
use: [
'vue-loader',
{
loader: 'markdown-to-vue-loader',
},
],
},
],
}
}
}
普通にvue componentとしてimportできます。
import bla from "@/bla.md"
export default {
components: {
bla
}
}
Demo (Glitch) (画面上のShowボタンでプレビューが見れます)
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.37%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2019/06/06 06:52
無知で申し訳ないのですが、’configureWebpack’と'chainWebpack'の違いはなんなのでしょうか?
2019/06/06 21:29
https://cli.vuejs.org/guide/webpack.html#chaining-advanced