NUXT 3博客URL使用日文字符遇404问题求助

问题分析 #

核心问题是Nuxt处理非ASCII字符（日文）的Markdown文件名时，路由映射出现不匹配，导致访问日文路径时返回404，无论是否使用encodeURIComponent编码都无法正常匹配。

可行解决方案 #

1. 配置Nitro路由编码 #

Nuxt底层的Nitro引擎需要明确指定路由编码格式，确保能正确解析UTF-8路径：
在nuxt.config.ts中添加配置：

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/blog/**': {
        encoding: 'utf-8'
      }
    }
  }
})

该配置会强制/blog/下的所有路由使用UTF-8编码解析，匹配日文路径。

2. 使用ASCII Slug替代文件名作为路由 #

这是最稳妥的兼容方案，脱离文件名绑定，给每个Markdown文件添加ASCII格式的slug字段，既保证路由正常，又不影响日文标题显示：

• 在日文Markdown文件的frontmatter中添加slug：

---
title: ポースト０１
slug: post-01
---

• 生成链接时使用slug而非文件名路径：

<NuxtLink :to="`/blog/${post.slug}`" class="">{{ post.title }}</NuxtLink>

3. 检查Markdown插件配置 #

若使用@nuxt/content这类Markdown处理插件，需确认插件是否正确处理非ASCII文件名：
在nuxt.config.ts中配置content模块，确保路径解析逻辑正常：

export default defineNuxtConfig({
  content: {
    navigation: {
      fields: ['title', 'slug'] // 确保读取自定义slug字段
    }
  }
})

修复请求提交方向 #

• 若为路由解析、静态页面生成时的路径匹配问题，属于Nuxt核心（Nitro引擎），提交到Nuxt官方仓库；
• 若为Markdown文件读取、路径提取逻辑问题，属于你使用的Markdown插件（如@nuxt/content），提交到对应插件的官方仓库。

内容的提问来源于stack exchange，提问作者Totoro