Nuxt.js Content与Nuxt I18n：本地化内容404问题排查

问题描述 #

开发基于Nuxt.js的多语言博客，使用@nuxt/content和@nuxtjs/i18n模块。初始采用content/blog/hello-world.md结构时，页面可正常加载内容；改为按语言拆分的content/en/blog/hello-world.md、content/ar/blog/hello-world.md结构，并修改blog/index页面查询逻辑加入locale后，博客文章无法显示，出现**404（文档未找到）**错误。

配置文件（nuxt.config.ts） #

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    // Devtools
    devtools: {enabled: true},
    modules: [
        '@nuxt/content',
        "@nuxtjs/google-fonts",
        "@nuxtjs/i18n",
        "nuxt-icon",
        "@nuxtjs/tailwindcss"
    ],
    // Nuxt Content options
    content: {
        documentDriven: {},
        highlight: {
            theme: 'github-dark'
        },
        contentHead:true,
        defaultLocale: 'en',
        locales: ['en', 'ar']
    },
    googleFonts: {
        families: {
            'Roboto Mono': [400, 500, 600, 700]
        }
    },
    i18n: {
        vueI18n: './i18n.config.ts',
        strategy: 'prefix_except_default',
        locales: [
            {
                "code": 'en',
                "iso": 'en-US',
                "file": "en-US.ts",
                "dir": "ltr",
                //Custom Properties
                "langName": "English"
            },
            {
                "code": 'ar',
                "iso": 'ar-SY',
                "dir": 'rtl',
                "file": "ar-SY.ts",
                //Custom Properties
                "langName": "العربيّة"
            }
        ],
        defaultLocale: 'en',
        lazy: true,
        langDir: 'lang',
    }
})

项目目录结构 #

.
├── app.vue
├── assets
│   └── global_scss
│       ├── _breakpoints-mixin.scss
│       ├── global-styles.scss
│       ├── _reset.scss
│       └── _variables.scss
├── components
│   ├── content
│   │   └── MdCustomLink.vue
│   ├── CustomLink
│   │   ├── CustomLink.scss
│   │   └── CustomLink.vue
│   ├── EmploymentCard
│   │   ├── EmploymentCard.scss
│   │   └── EmploymentCard.vue
│   ├── Footer
│   │   ├── Footer.scss
│   │   └── Footer.vue
│   ├── Navbar
│   │   ├── Navbar.scss
│   │   └── Navbar.vue
│   └── Tag
│       ├── Tag.scss
│       └── Tag.vue
├── content
│   ├── ar
│   │   └── blog
│   │       └── hello-world.md
│   └── en
│       └── blog
│           └── hello-world.md
├── i18n.config.ts
├── lang
│   ├── ar-SY.ts
│   └── en-US.ts
├── nuxt.config.ts
├── package.json
├── package-lock.json
├── pages
│   ├── blog
│   │   ├── index
│   │   │   ├── index.scss
│   │   │   └── index.vue
│   │   └── [...slug].vue
│   ├── index.scss
│   └── index.vue
├── public
│   ├── favicon.ico
│   └── images
│       ├── blog
│       │   ├── clement-helardot-95YRwf6CNw8-unsplash.jpg
│       │   ├── karl-pawlowicz-QUHuwyNgSA0-unsplash.jpg
│       │   └── nasa-Q1p7bh3SHj8-unsplash.jpg
│       └── my-icon.png
├── README.md
├── server
│   └── tsconfig.json
├── tailwind.config.ts
├── Todo.md
└── tsconfig.json

解决方案 #

1. 修正博客列表页查询逻辑 #

在pages/blog/index/index.vue中，结合当前locale查询对应语言目录下的文章：

<script setup>
const { locale } = useI18n()
// 按当前语言查询对应目录下的博客文章
const articles = await queryContent(`/${locale.value}/blog`).sort({ date: -1 }).find()
</script>

2. 修正文章详情页路由查询 #

在pages/blog/[...slug].vue中，根据当前locale和路由参数获取对应文章：

<script setup>
const { locale } = useI18n()
const route = useRoute()
// 拼接当前语言和slug路径查询文章
const article = await queryContent(`/${locale.value}/blog`, route.params.slug).findOne()
</script>

3. 验证文档驱动模式路由匹配 #

由于开启了documentDriven: {}，@nuxt/content会自动生成路由，需确保：

• 内容文件夹结构与路由前缀匹配（en/blog对应/blog，ar/blog对应/ar/blog）
• 文章frontmatter中的locale字段（如果设置）需与文件夹语言一致，也可省略该字段，由目录结构自动识别

4. 清除缓存并重启服务 #

修改配置和查询逻辑后，执行以下操作确保生效：

# 清除Nuxt缓存
npx nuxt clean
# 重启开发服务
npm run dev

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