Node.js构建版本i18n本地化失效：JSON文件为空问题排查

问题核心 #

你的问题集中在两个关键点：构建工具未正确复制locales目录下的JSON文件，或者构建后的路径解析逻辑错误，导致dist目录里的JSON文件为空或无法被正确读取。

解决方案 #

1. 确保构建工具复制locales文件到dist #

TypeScript编译器（tsc）默认仅处理.ts/.tsx文件，不会自动复制JSON、静态资源等文件。需要配置构建工具将locales目录完整同步到dist：

若使用纯tsc编译

修改tsconfig.json，将locales目录加入include列表，同时建议开启resolveJsonModule以支持JSON模块导入：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    // 其他编译选项...
  },
  "include": [
    "src/**/*",
    "src/locales/**/*" // 新增此行，确保locales文件被纳入编译流程
  ]
}

如果tsc仍未复制文件，在package.json的scripts中添加复制脚本：

{
  "scripts": {
    "build": "tsc && cp -r src/locales dist/", // Linux/Mac环境
    // Windows环境替换为："build": "tsc && xcopy src\\locales dist\\locales /E /I"
  }
}

若使用webpack/tsup等打包工具

• Webpack：安装copy-webpack-plugin后，在配置文件中添加复制规则：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'src/locales', to: 'locales' },
      ],
    }),
  ],
};

• tsup：在tsup.config.ts中配置assets字段，指定需要复制的资源：

import { defineConfig } from 'tsup';

export default defineConfig({
  // 其他配置...
  assets: ['src/locales/**/*'],
});

2. 修正i18n的路径解析逻辑 #

你当前用字符串拼接路径的方式，在构建后可能出现路径分隔符错误，且ES模块的import.meta.url在Windows环境下会带file:/前缀，导致路径无效。建议用path.join处理路径，同时正确获取ES模块下的__dirname：

修改i18n配置代码：

import i18n from 'i18n';
import path from 'path';
import { fileURLToPath } from 'url';

// 正确获取ES模块环境下的__dirname
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

i18n.configure({
  locales: ['en_us', 'de_de'],
  defaultLocale: 'en_us',
  // 用path.join避免路径分隔符兼容问题
  directory: path.join(__dirname, 'locales'),
  // 可选：开启调试日志，方便排查路径加载问题
  logDebugFn: (msg) => console.log('i18n debug:', msg),
  logWarnFn: (msg) => console.warn('i18n warn:', msg),
});

3. 验证构建结果 #

构建完成后，检查dist/locales目录下的JSON文件是否保留原内容。若仍为空，重点排查构建工具的复制逻辑是否生效，比如脚本是否执行、配置是否正确。

额外提示 #

如果项目使用ES模块，确保package.json中设置了"type": "module"，避免CommonJS与ES模块的路径解析冲突。

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