如何在i18next中指定翻译文件夹的路径？

• 核对backend配置里的loadPath路径是否匹配实际文件结构
  假设你的翻译文件存放在public/locales/{{lng}}/{{ns}}.json，对应配置应该如下：

  import i18n from 'i18next';
  import Backend from 'i18next-http-backend';
  import { initReactI18next } from 'react-i18next';
  
  i18n
    .use(Backend)
    .use(initReactI18next)
    .init({
      backend: {
        loadPath: '/locales/{{lng}}/{{ns}}.json', // 路径层级必须和文件结构完全对应
      },
      lng: 'zh-CN',
      fallbackLng: 'zh-CN',
      interpolation: {
        escapeValue: false
      }
    });
  

  要是翻译文件在src/locales目录下，得调整路径或者配置打包工具把该目录同步到输出目录。

• 确认打包工具是否正确处理翻译文件
  用Vite的话，在vite.config.js里确保locales目录被纳入静态资源：

  export default defineConfig({
    publicDir: 'public', // 若locales在public下，保持默认即可
    // 若locales在src下，可配置copy插件
    plugins: [
      {
        name: 'copy-locales',
        buildEnd() {
          require('fs-extra').copySync('src/locales', 'dist/locales');
        }
      }
    ]
  });
  

  用Webpack的话，借助copy-webpack-plugin复制目录：

  const CopyPlugin = require('copy-webpack-plugin');
  
  module.exports = {
    plugins: [
      new CopyPlugin({
        patterns: [{ from: 'src/locales', to: 'locales' }],
      }),
    ],
  };
  

• 检查命名空间（namespace）是否匹配
  如果初始化时设置了defaultNS: 'translation'，翻译文件名必须是translation.json；自定义命名空间的话，文件名要和配置里的命名空间完全一致。

• 查看浏览器控制台的网络请求
  打开开发者工具的Network标签，观察翻译文件的加载请求。如果返回404，说明路径配置错误，调整loadPath直到请求成功。

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