如何配置i18n.config.js使`preact build --prerenderUrls`命令可正常构建

preact-cli的prerender逻辑运行在Node.js环境，和浏览器端生产运行环境天然隔离，你只需要在i18n初始化时通过环境判断加载对应的后端即可，无需修改原有构建流程。

你可以直接修改你的i18n配置文件，根据运行环境动态选择后端：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import FsBackend from 'i18next-fs-backend';

// prerender阶段运行在Node环境，不存在window对象，以此作为判断依据
const isPrerender = typeof window === 'undefined';

i18n.use(initReactI18next);

// 动态加载对应环境的后端
if (isPrerender) {
  i18n.use(FsBackend);
} else {
  i18n.use(HttpBackend);
}

i18n.init({
  // 原有通用配置：支持语言、默认语言、插值规则等保持不变
  fallbackLng: 'zh',
  interpolation: {
    escapeValue: false
  },
  // 动态传入对应后端的配置
  loadPath: isPrerender 
    ? './public/locales/{{lng}}/{{ns}}.json' // 本地翻译文件路径，适配prerender阶段读取
    : 'https://你的CDN域名/locales/{{lng}}/{{ns}}.json', // 生产CDN路径，保持原有配置
  // prerender阶段预加载所有需要用到的语言和命名空间，避免按需加载导致的构建挂起
  preload: isPrerender ? ['zh', 'en'] : [],
  ns: isPrerender ? ['common', 'home', '路由对应的命名空间'] : ['common']
});

export default i18n;

配置完成后直接执行preact build --prerenderUrls ./prerender-urls.js即可正常完成构建，不需要额外调整参数。

你之前对chained-backend的使用存在误解，chained-backend本身支持结合环境判断动态配置后端列表，不需要固定在浏览器端将fs-backend作为加载源。本场景下甚至不需要用到chained-backend，直接动态挂载对应后端即可满足需求。

• 单次构建即可完成prerender和生产产物打包，所有资源hash完全一致，无需合并两次构建产物
• 不需要额外启动临时HTTP服务，没有稳定性问题
• 生产环境逻辑完全保持不变，还是从CDN按需加载翻译资源
• 无冗余代码，fs-backend不会被打包到浏览器端产物中，不会增加生产包体积

你提到的preact-cli分阶段构建能力属于更通用的需求，但当前场景下不需要用到该能力，上述方案即可完美解决问题。

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