项目中多语言的设置实属常见，这里有一份初学者的思路及代码分享

多语言设置

思路引导：
1.首先会有一个语言包，当然这是最繁琐的地方，如果客户方没有提供，则需要个人逐个翻译
2.其次选择不同的语言种类，则切换不同的语言类型
具体如下：
1.语言包：在合适的地方建立一个文件夹，命名为lang.js（可以在routes同级别）；
格式：一一对应

exports.lang = {
	ah_cn: {
		//登录页面
		login_name: '请输入账号',
		login_pass: '请输入密码',
	},
	ex_us: {
		//登录页面
		login_name: 'Please input account number',
		login_pass: 'Please input a password',
	}
}

2.在fetch.js中把该文件引入并且存储在本地：

import {lang} from '../lang';

存储：

export function setLang(lang) {
	console.log(lang);  //此处的lang代表的就是我们创建的语言包
	store.set("lang", lang);
}

3.存储当前的语言类型（中文还是英文或者是其他）
存储：

export function setLang_type(type){
   store.set('type',type)
}

获取：

export function getLang_type(){
    return store.get('type')
}

4.根据语言类型获取相应的语种:
如果本地的语言存在，且语言状态===2的时候返回对应的英文，否则返回中文

export function getLang() {
	var langStore = store.get("lang");
	if (!!langStore&&Number(getLang_type())===2) {
	    return langStore.ex_us
	} else {
	    return langStore.ah_cn;
	}
}

5.页面的调用：
A.首先需要把切换语言的方法、实现语言展示的方法引入；

import { ,getLang,setLang_type } from '../utils/fetch';

B.语言的选择，当选择英文的时候调用setLang_type(2)否则就调用setLang_type(1)
C.实现页面的展示：

{getLang().login_pass}  ||  getLang().login_pass   ||  `${getLang().login_pass}￥`

根据需要展示的位置而设置

*双感叹号是要把数据类型变更为boolean类型
*stort.set()把目标存储在本地
*stort.get()把目标从本地取出来

React项目中多语言的设置

多语言设置

猜你喜欢