使用Vite动态导入Markdown文件

Question

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

\n

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

\n

我想要的是将其传递blogId到导入路径，例如：

\n

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

\n

这样就可以在每条路径上导入正确的文件/blog/*。我通过延迟加载降价来尝试此操作，例如：

\n

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

\n

但这会引发错误，当我登录时Markdown我看到

\n

{$$typeof: Symbol(react.lazy), _payload: {\xe2\x80\xa6}, _init: \xc6\x92}\n$$typeof: Symbol(react.lazy)\n_init: \xc6\x92 lazyInitializer(payload)\n_payload: {_status: -1, _result: \xc6\x92}\n

\n

这似乎是空的。实现这一目标的解决方案是什么？

\n

Answer 1

我在导入资产时也遇到了问题。就我而言.md，导入失败。

import Article from './assets/article.md';

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

所以我解决了这个问题，将设置assetsInclude: ['**/*.md']添加到 vite.config.js （对于我的 .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 希望有帮助。

干杯。