使用 Vite 动态导入 Markdown 文件

Question

我正在寻找一种解决方案，可以让我动态地根据查询字符串呈现 markdown。目前我是在 React + Vite 中这样呈现 markdown 的：

import some other stuff...
import { useParams } from 'react-router-dom';
import { ReactComponent } from '../content/blog1.md';
const BlogPost = () => {
  const params = useParams();
  return (
    <Base>
      <PageTitle title={`title of blog ${params.blogId}`} />
      <ReactComponent />
    </Base>
  );
};
export default BlogPost;

我希望能将blogId传递到导入路径中，例如：

import { ReactComponent } from `../content/blog${params.blogId}.md`

确保每个/blog/*路由都导入了正确的文件。我尝试通过延迟加载markdown来实现：

const path = `../content/blog${params.blogId}.md`;
const Markdown = React.lazy(() => import(path));

但是这会引起错误，当我记录Markdown时，我看到：

{$$typeof: Symbol(react.lazy), _payload: {…}, _init: ƒ}
$$typeof: Symbol(react.lazy)
_init: ƒ lazyInitializer(payload)
_payload: {_status: -1, _result: ƒ}

这个看起来是空的。如何解决这个问题？

- DSteman

---

我自己也曾经遇到过同样的问题，最终使用 showdown 从 markdown 生成 html 并进行托管。我认为你的懒加载问题是由于在构建时不知道应该包含哪些文件所致。我基本上浏览了所有针对 vite 和 rollup 的 markdown 库，有些可以工作，但与你一样存在多个文件的问题。vite-plugin-ssr 可以解决这个问题，但我不喜欢它——对于一个简单的落地页来说太复杂了。不过，如果这是一个需要 SEO 的博客，拥有现成的 html 文件可能会很好（SSG）。你可以考虑使用 Next、Gatsby 或 Jekyll。 - warlo

当我将Markdown放在公共文件夹中时，一切都可以正常工作，因此懒加载不是正确的解决方案。可能会尝试像你建议的那样使用SSR解决方案。 - DSteman

是的，这很有道理，因为vite/rollup不知道在构建时包含哪些文件，由于惰性加载路径中的变量。然后将它们提供到公共文件夹中会强制它们存在。 - warlo

Answer 1

我在导入资源时也遇到了问题。在我的情况下，.md 的导入失败了。 import Article from './assets/article.md';

无法解析导入分析的源，因为内容包含无效的 JS 语法。您可能需要安装适当的插件来处理 .md 文件格式，或者如果它是资产，则在您的配置中添加 "**/*.md" 到 assetsInclude

所以我通过在 vite.config.js 中添加 assetsInclude: ['**/*.md'] 设置（对于我的 .md 文件）来解决了这个问题。

export default defineConfig({
  ...
  plugins: [react()],
  assetsInclude: ['**/*.md']
  ...
})

最终这开始起作用：

import("./assets/article.md").then(res => {
    fetch(res.default)
    .then(response => response.text())
    .then(text => console.log(text))
})

文档在这里：https://vitejs.dev/guide/assets.html 希望能帮到您。

祝好。

- Witold Kaczurba

---

它与md文件很好地配合使用。谢谢！ - kollein