Vue CLI + TypeScript 프로젝트에서 마크다운 파일을 가져오는 방법

최근에 Vue 구성 요소에서 마크다운 파일을 가져와야 하는 필요성을 알게 되었고 인터넷이 혼란스러운 솔루션으로 가득 차 있다는 것을 깨달았습니다. 몇 시간 동안 주변을 만지작거리다가 정말 아주 간단하다는 것을 알게 되었습니다.

여기 내가 가지고 있는 설정에 대해 조금 있습니다.

뷰 CLI

TypeScript

나는 또한 Vue Markdown 구성 요소를 사용하고 있습니다. 내가 하고 싶었던 것은

내용을 .md 파일에 씁니다.

내 구성 요소에서 가져옵니다.

Vue Markdown에 source 소품으로 전달합니다.

그래서 내 구성 요소에서 마크다운 파일을 가져왔고 가장 먼저 본 것은 구불구불하게 이 내용을 알려주는 것입니다.

TS2307: Cannot find module './query-guide.md'.

이는 TypeScript가 이 모듈을 어디에서 찾을 수 있는지 또는 모듈인지 모르기 때문입니다. 이를 해결하기 위해 shims-vue.d.ts로 이동하여 모든 마크다운 파일을 모듈로 선언했습니다.

declare module "*.md";

...그리고 squiggly가 사라졌습니다.

NOTE: You can do this do any kind of file. In my project I also declare all scss files to be module so I can import them directly in my component. Read more on why I do that.

정리하다보니 이런게 나왔네요.

Module parse failed: Unexpected character '#' (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

즉, Webpack은 마크다운 파일을 모듈로 로드하는 방법을 모릅니다. 빠른 인터넷 검색을 통해 파일 내용을 있는 그대로 가져오려면 raw-loader을 사용해야 한다고 지적했습니다.

A loader for webpack that allows importing files as a String.

개발자 종속성으로 raw-loader를 설치했습니다.

yarn add -D raw-loader

다음으로 vue.config.js 를 통해 webpack을 사용하도록 지시해야 했습니다. 다음은 해당 구성의 모습입니다.

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.md$/i,
          loader: "raw-loader",
        },
      ],
    },
  },
};

그것은 나를 위해 그것을 했다. 다른 모듈과 마찬가지로 구성 요소에서 마크다운 파일을 가져와 사용할 수 있었습니다.

import guideContent from "./query-guide.md";

이것이 당신이 주변을 만지작거리는 시간을 많이 절약하는 데 도움이 되기를 바랍니다.

원래 게시됨 praveenpuglia.com .