项目国际化

455 阅读1分钟

1、创立locales文件夹,存放翻译文件

en-USexport default {
 'OK': 'OK',
 'Cancel': 'Cancel',
}
zh-CNexport default {
 'OK': '确定',
 'Cancel': '取消',
}

import pages from './en-US/pages';
export default {
  ...pages
};

image.png

2、.umirc.ts文件中(默认打包语言为中文)

locale: {
    default: 'zh-CN',
    antd: true,
    baseNavigator: true,
  },

3、package.json中设置打包、运行脚本

{
  "name": "bench",
  "private": true,
  "scripts": {
    "start": "umi dev",
    "///": "国内版本使用start命名",
    "start:zh": "cross-env BUILD_ENV=zh-CN umi dev",
    "////": "海外版本使用start命令",
    "start:nzh": "cross-env BUILD_ENV=not-zh-CN umi dev",
    "build": "umi build",
    "/": "编译国内版本使用build命名",
    "build:zh": "cross-env BUILD_ENV=zh-CN umi build",
    "//": "编译海外版本使用命令",
    "build:nzh": "cross-env BUILD_ENV=not-zh-CN umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage",
    "lint": "eslint ./src --ext .tsx --ext .ts",
    "lint:fix": "eslint ./src --ext .tsx --ext .ts --ext .js --ext .jsx --fix",
    "eslint": "eslint --ext .js --ext .jsx --ext .tsx --ext .ts ./src -f html -o eslint.html"
  },
}

4、在typings.d.ts中声明国际化用法

declare const intl: {
  formatMessage: ({ id }: { id: string, [key: string]: any }, { other }?: { [key: string]: any }) => string,
  locale: 'en-US' | 'zh-CN',
  // separator: '&' | ',',
  // 现在中英文统一用符号“|”
  separator: '|' | '|',
  [key: string]: any
};

image.png

5、项目中使用

 {
   title: intl.formatMessage({ id: 'Remark' }),
   dataIndex: 'remark',
   align: 'center',
   ellipsis: true
  }