nuxt generate如何自动扫描contents目录nuxt-markdown-blog-starter静态路由生成原理深度解析【免费下载链接】nuxt-markdown-blog-starterNuxt Markdown blog starter项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-markdown-blog-starter在 nuxt-markdown-blog-starter 中你只需要往contents目录丢一篇 Markdown 文章运行nuxt generate就会自动扫描目录、为每篇文章生成对应的静态路由最终产出一整套可部署的静态页面。这篇文章带你拆解这套自动扫描 静态路由生成机制的完整原理帮新手快速理解 Nuxt 静态站点生成SSG的核心思路。先搞懂nuxt generate 到底做了什么普通 Nuxt 应用在服务器端动态渲染页面而nuxt generate是 Nuxt 提供的静态站点生成模式它在构建阶段把所有路由预先渲染成静态 HTML 文件输出到dist/目录。这意味着什么⚡️ 页面访问快静态 HTML 直接由 CDN 或静态服务器响应 部署极简不需要 Node 服务器 任何静态托管平台都能上线项目里的 netlify.toml 写明了发布流程构建命令是npm run generate发布目录是dist/[build] publish dist/ command npm run generate而package.json中的generate: nuxt generate脚本就是你手动触发这套流程的入口。核心原理getPaths() 自动扫描 contents 目录整个自动扫描机制的关键藏在 nuxt.config.js 顶部的getPaths函数里代码只有短短几行function getPaths (lang, type) { let initial lang if (lang en) { initial } return fs.readdirSync(path.resolve(__dirname, contents, ${lang}/${type})) .filter(filename path.extname(filename) .md) .map(filename ${initial}/${type}/${path.parse(filename).name}) }它做了三件事扫描目录用fs.readdirSync读取contents/语言/类型目录下的所有文件过滤文章只保留.md扩展名的文件其他文件自动忽略生成路由把文件名去掉扩展名转成路由路径以英文站为例contents/en/blog/下有一篇文章bacon-ipsum.mdgetPaths(en, blog)就会生成路由/blog/bacon-ipsum西班牙语文章则自动加上/es前缀变成/es/blog/xxx。这正是它配合多语言站点的方式。静态路由生成的三件套扫描出来的路由要真正变成静态页面还依赖三个部分的协作1️⃣ generate.routes 汇总所有待生成路由generate: { routes: [ /es, 404 ] .concat(getPaths(es, blog)) .concat(getPaths(en, blog)) }/es、404是固定路由其余全部来自getPaths的扫描结果。新增文章不需要改任何配置——文件放进目录路由自动出现。2️⃣ 动态路由页 pages/blog/_slug.vue 接住所有文章路由Nuxt 用_slug.vue这种动态路由页面匹配所有/blog/xxx路径一篇 .md 文件对应一个slug不需要为每篇文章单独建页面。3️⃣ asyncData 动态导入 Markdown 文件pages/blog/_slug.vue 的asyncData中const fileContent await import(~/contents/${app.i18n.locale}/blog/${params.slug}.md)根据 URL 里的slug动态加载对应语言的 .md 文件取出 frontmatter 里的title、description、year等元数据用于页面渲染和 SEO 的head信息。webpack 如何把 .md 变成可导入模块这里有个容易被忽略的细节import一个 .md 文件为什么不会报错答案是 nuxt.config.js 的build.extend里注册的frontmatter-markdown-loader它只作用于contents目录自动解析 YAML frontmatter 元数据title、trans、id等把 Markdown 正文交给markdown-itmarkdown-it-prism渲染成 HTML最终转成可被 Vue 调用的 render 函数也就是说文件层面的解析交给 webpack loader路由层面的发现交给 getPaths 扫描两者配合才完成了整套自动化。完整生成链路一图看懂把上面的环节串起来整个流程是步骤谁在做做什么1开发者在contents/lang/blog/新增xxx.md2getPaths构建时扫描目录产出路由/[lang]/blog/xxx3nuxt generate逐条访问路由预渲染成静态 HTML4_slug.vueasyncData动态导入 .md渲染文章与 SEO 头信息5部署dist/目录发布到静态托管另外注意首页文章列表由 contents/en/blogsEn.js 和 contents/es/blogsEs.js 维护新文章除了放文件还要在这里登记一次 slug它控制的是列表展示顺序而不影响路由生成。最快上手方式三步跑起来想亲手验证这套机制三步搞定git clone https://gitcode.com/gh_mirrors/nu/nuxt-markdown-blog-starter cd nuxt-markdown-blog-starter npm install npm run dev # 本地开发访问 http://localhost:3000 npm run generate # 静态生成产物在 dist/跑完npm run generate后去dist/里找找blog/bacon-ipsum/index.html——那就是自动扫描 静态路由生成的直接证据 小结nuxt-markdown-blog-starter 用目录即路由的思路把内容管理与路由解耦getPaths负责自动发现_slug.vue动态路由负责统一承接frontmatter-markdown-loader 负责内容解析nuxt generate负责静态输出。理解这套模式后无论是多语言博客还是文档站你都可以复用同样的静态路由生成方案。【免费下载链接】nuxt-markdown-blog-starterNuxt Markdown blog starter项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-markdown-blog-starter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 nuxt generate如何自动扫描contents目录：nuxt-markdown-blog-starter静态路由生成原理深度解析
nuxt generate如何自动扫描contents目录nuxt-markdown-blog-starter静态路由生成原理深度解析【免费下载链接】nuxt-markdown-blog-starterNuxt Markdown blog starter项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-markdown-blog-starter在 nuxt-markdown-blog-starter 中你只需要往contents目录丢一篇 Markdown 文章运行nuxt generate就会自动扫描目录、为每篇文章生成对应的静态路由最终产出一整套可部署的静态页面。这篇文章带你拆解这套自动扫描 静态路由生成机制的完整原理帮新手快速理解 Nuxt 静态站点生成SSG的核心思路。先搞懂nuxt generate 到底做了什么普通 Nuxt 应用在服务器端动态渲染页面而nuxt generate是 Nuxt 提供的静态站点生成模式它在构建阶段把所有路由预先渲染成静态 HTML 文件输出到dist/目录。这意味着什么⚡️ 页面访问快静态 HTML 直接由 CDN 或静态服务器响应 部署极简不需要 Node 服务器 任何静态托管平台都能上线项目里的 netlify.toml 写明了发布流程构建命令是npm run generate发布目录是dist/[build] publish dist/ command npm run generate而package.json中的generate: nuxt generate脚本就是你手动触发这套流程的入口。核心原理getPaths() 自动扫描 contents 目录整个自动扫描机制的关键藏在 nuxt.config.js 顶部的getPaths函数里代码只有短短几行function getPaths (lang, type) { let initial lang if (lang en) { initial } return fs.readdirSync(path.resolve(__dirname, contents, ${lang}/${type})) .filter(filename path.extname(filename) .md) .map(filename ${initial}/${type}/${path.parse(filename).name}) }它做了三件事扫描目录用fs.readdirSync读取contents/语言/类型目录下的所有文件过滤文章只保留.md扩展名的文件其他文件自动忽略生成路由把文件名去掉扩展名转成路由路径以英文站为例contents/en/blog/下有一篇文章bacon-ipsum.mdgetPaths(en, blog)就会生成路由/blog/bacon-ipsum西班牙语文章则自动加上/es前缀变成/es/blog/xxx。这正是它配合多语言站点的方式。静态路由生成的三件套扫描出来的路由要真正变成静态页面还依赖三个部分的协作1️⃣ generate.routes 汇总所有待生成路由generate: { routes: [ /es, 404 ] .concat(getPaths(es, blog)) .concat(getPaths(en, blog)) }/es、404是固定路由其余全部来自getPaths的扫描结果。新增文章不需要改任何配置——文件放进目录路由自动出现。2️⃣ 动态路由页 pages/blog/_slug.vue 接住所有文章路由Nuxt 用_slug.vue这种动态路由页面匹配所有/blog/xxx路径一篇 .md 文件对应一个slug不需要为每篇文章单独建页面。3️⃣ asyncData 动态导入 Markdown 文件pages/blog/_slug.vue 的asyncData中const fileContent await import(~/contents/${app.i18n.locale}/blog/${params.slug}.md)根据 URL 里的slug动态加载对应语言的 .md 文件取出 frontmatter 里的title、description、year等元数据用于页面渲染和 SEO 的head信息。webpack 如何把 .md 变成可导入模块这里有个容易被忽略的细节import一个 .md 文件为什么不会报错答案是 nuxt.config.js 的build.extend里注册的frontmatter-markdown-loader它只作用于contents目录自动解析 YAML frontmatter 元数据title、trans、id等把 Markdown 正文交给markdown-itmarkdown-it-prism渲染成 HTML最终转成可被 Vue 调用的 render 函数也就是说文件层面的解析交给 webpack loader路由层面的发现交给 getPaths 扫描两者配合才完成了整套自动化。完整生成链路一图看懂把上面的环节串起来整个流程是步骤谁在做做什么1开发者在contents/lang/blog/新增xxx.md2getPaths构建时扫描目录产出路由/[lang]/blog/xxx3nuxt generate逐条访问路由预渲染成静态 HTML4_slug.vueasyncData动态导入 .md渲染文章与 SEO 头信息5部署dist/目录发布到静态托管另外注意首页文章列表由 contents/en/blogsEn.js 和 contents/es/blogsEs.js 维护新文章除了放文件还要在这里登记一次 slug它控制的是列表展示顺序而不影响路由生成。最快上手方式三步跑起来想亲手验证这套机制三步搞定git clone https://gitcode.com/gh_mirrors/nu/nuxt-markdown-blog-starter cd nuxt-markdown-blog-starter npm install npm run dev # 本地开发访问 http://localhost:3000 npm run generate # 静态生成产物在 dist/跑完npm run generate后去dist/里找找blog/bacon-ipsum/index.html——那就是自动扫描 静态路由生成的直接证据 小结nuxt-markdown-blog-starter 用目录即路由的思路把内容管理与路由解耦getPaths负责自动发现_slug.vue动态路由负责统一承接frontmatter-markdown-loader 负责内容解析nuxt generate负责静态输出。理解这套模式后无论是多语言博客还是文档站你都可以复用同样的静态路由生成方案。【免费下载链接】nuxt-markdown-blog-starterNuxt Markdown blog starter项目地址: https://gitcode.com/gh_mirrors/nu/nuxt-markdown-blog-starter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考