React项目中引入i18n实现多语言

624 阅读1分钟

一、下载依赖

npm install i18next react-i18next --save

二、创建locales文件夹

主要包括多语言的js文件以及一个资源导出文件

以英语举例:(以此为例可创建多个)

en.js

export const en = {
  landing: {
    name1: "Participate in the draw",
  },
};

resource.js

import { en } from "./en";

export default {
  en: {
    translation: en,
  },
};

三、创建i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import resources from "./locales/resources";

i18n.use(initReactI18next).init({
  fallbackLng: "en",
  lng: "en",
  // todo 需要根据环境进行判断
  debug: false,
  resources: resources,
  interpolation: {
    escapeValue: false,
  },
});
export default i18n;