使用 Nuxt i18n 的一个坑：解决部署中的 404 问题

国际化（i18n）支持是一个重要的需求。在我使用 Nuxt 3 和 @nuxtjs/i18n 进行国际化时，遇到了一个棘手的问题：在打包后的应用程序中部署到 Nginx 时，出现了 404 错误。

项目背景

我的项目使用了以下版本的依赖：

• Nuxt: ^3.11.2
• @nuxtjs/i18n: ^8.5.2

这个项目需要支持英文（en）和中文（zh）两种语言。在开发过程中，Nuxt i18n 很好地处理了语言的切换，用户界面也按预期工作。然而，当我完成打包，并尝试将其部署到 Nginx 时，问题开始出现。

问题描述

在进行打包时，Nuxt i18n 会为每种语言生成一份完整的工程文件。例如，我发现它为英文和中文分别生成了两个目录，分别包含各自的资源文件。起初，我认为这种行为是合理的，然而当我在 Nginx 上配置后，访问这些文件时却收到了 404 错误。

初步调试

我首先怀疑是 Nginx 的路径配置问题，因此尝试修改 Nginx 的配置文件。我将入口文件的路径配置为 root /home/website/zh，希望能将请求指向相应的语言文件。然而，尽管我访问了入口文件，所有的资源文件依然返回 404 错误。

进一步排查

在意识到问题可能出在入口文件路径后，我开始尝试修改 baseUrl 和其他相关配置，但无论怎么调整都未能解决问题。经过一番思考，我猜测这可能与 Nginx 的默认行为以及 Nuxt i18n 的 url 处理有关。

解决方案

经过几轮调试和思考，我决定尝试对 Nuxt i18n 进行配置调整。在 nuxt.config.js 文件中，我将 strategy 设置为 "no_prefix"。这一设置意味着 URL 中将不再包含语言前缀。

export default {
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    strategy: 'no_prefix',
    locales: [
      { code: 'en', iso: 'en-US', name: 'English' },
      { code: 'zh', iso: 'zh-CN', name: '中文' }
    ],
    defaultLocale: 'zh',
  }
}

重新打包后，我再次修改 Nginx 的 index 路径地址，以便指向新的入口文件。ok这次搞定了。
其实我想过，不加这个属性应该也能解决，但是没找到解决办法，如果有好的方案欢迎留言板指导下我。

我的微信公众号： 梨的前端小屋