vue-i18n国际化语言在项目中的使用

为什么要国际化？

前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。
目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是vue项目使用i18n插件实现多语言切换功能，最近有幸我刚好做了这方面的业务，下面是我对vue-i18n国际化语言的一点总结与记录

正文

项目中通常通过选择语言，或者标签的切换来展示不同的语言，控制语言的配置信息在locale中。

1.引入多语言

首先在main.js中进行引入并注册vue-i18n，引入中文语言包和英文语言包（根据开发需求引入语言包）

//main.js
//多语言引入
import VueI18n from 'vue-i18n'
import en from './locale/en.json' //英文
import zhHans from './locale/zh-Hans.json' //中文
Vue.use(VueI18n)

let i18nConfig = {
  locale: uni.getLocale(),// 获取已设置的语言
  messages: {
	en,
	'zh-Hans': zhHans,
  }
}

const app = new Vue({
    ...App,
	i18n,
})
app.$mount();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.语言包文件

创建json文件，放入你需要的语言，项目中我们使用了中文和英文，可以根据开发的需求创建需要的语言文件，注意每个语言包中的字段名要保持一致。

zh-Hans.json，en.json的结构如下

//zh-Hans.json
{
	"home": "首页"
}

//en.json
{
	"home": "home"
}
1
2
3
4
5
6
7
8
9

3.设置默认语言

这里设置的是默认语言为中文，可以根据开发语言自行设置

header['cb-lang'] = uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn'
1

4.在页面中使用

使用$t('字段名')在html中获取，使用this.$t('字段名')在js中获取

  



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5.在页面中切换语言

通过事件触发，点击切换语言，控制locale的值，调用对应的语言包，这里是通过点击图标切换语言（项目中只用到两种语言），使用多种语言时也可以通过选择语言来控制切换，判断目前使用的语言，点击图标后将另一个语言赋给locale，然后将该语言存储在本地缓存中

	
    	
    	
    

1
2
3
4
5
6

methods: {
	locale(){
    	if(this.$i18n.locale=='zh-Hans'){
        	this.$i18n.locale = 'en';
            uni.setStorageSync('locale', 'en_us')
        }else if(this.$i18n.locale=='en'){
        	this.$i18n.locale = 'zh-Hans';                                                                               uni.setStorageSync('locale', 'zh_cn')
        }
    },
}
1
2
3
4
5
6
7
8
9
10

遇到的问题

1.切换语言请求头语言不改变

调试的时候，不刷新页面，config.js只能触发一次，但是request.js里面这个请求方法每次都会触发，所以在request.js里把修改的cb_lang加上就会及时触发，这样调用接口后，后端就可以返回不同的语言数据了

//request.js

header['cb_lang'] = uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn'
1
2
3

2.在until.js等一些公共方法的文件中无法使用this.$t

在公共的js文件中，无法使用this来引用已经注册的组件，我们需要声明一个i18n对象，导出使用

import en from './en.json'
import zhHans from './zh-Hans.json'
import Vue from 'vue'; 
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
	locale: uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn',//默认为中文
	messages: {
		'en_us':en,
		'zh_cn': zhHans,
	}
})
export default i18n 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在公共文件中，就可以直接使用i18n.t('')来获取语言了

	if (!noAuth) {
		//登录过期自动登录
		if (!store.state.app.token && !checkLogin()) {
			toLogin();
			return Promise.reject({
				msg: i18n.t(`not_logged_in`)
			});
		}
	}
1
2
3
4
5
6
7
8
9

总结

在一些多语言项目中，固定的文字就需要定义在语言包中，通过locale控制语言的类型改变语言包，就可以实现国际化预言了。需要注意在一些公共js文件中，无法使用this,我们就需要声明一个i18n对象，导出使用；在写语言包时，需要注意语言包中的字段名需要保持一致，在请求头中通过切换语言来改变请求头的语言，调用接口后，后端就可以返回不同的语言数据了。在完成项目时，一定一定要细心，不然一个字母写错了，就会出现在每个文件中反复找。使用多语言时，会发现每种语言的语序会有一些差别，也是项目中需要注意的地方。写完后应该多注意页面的样式有没有出现问题，比如开始是中文，切换成英文时，由于英文较长会导致页面样式发生变化，还需要优化。

源码附件已经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

GIT 项目推荐：包含多端免授权可商用

附件地址：https://gitee.com/ZhongBangKeJi