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

作者：CRMEB

2022 年 8 月 12 日
陕西
本文字数：2159 字
阅读完需：约 7 分钟

为什么要国际化？

前端国际化：应用要服务于不同的地区的用户，所以应用不能单一语言；应用要能让不同地区的人无障碍使用就需要实现国际化。目前在各大商城项目中，对于国际化语言的需求越来越高了，其中最多的就是 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();

复制代码

2.语言包文件

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

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

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

复制代码

3.设置默认语言

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

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

复制代码

4.在页面中使用

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

<template>  	<view>      	<text>{{$t('home')}}</text>    	<view v-text="$t(`home`)"></view>	</view>  </template>  
<script>	export default {		data() {			return {				home: this.$t(`home`)			}		}	}</script>

复制代码

5.在页面中切换语言

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

<view class="message">	<view hover-class="none" @click="locale()">    	<view v-if="$i18n.locale == 'zh-Hans'" class="iconfont icon-jinbi_o"></view>    	<view v-if="$i18n.locale == 'en'" class="iconfont icon-yue"></view>    </view></view>

复制代码

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.切换语言请求头语言不改变

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

//request.js
header['cb_lang'] = uni.getStorageSync('locale') ? uni.getStorageSync('locale') :'zh_cn'

复制代码

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

复制代码

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

if (!noAuth) {		//登录过期自动登录		if (!store.state.app.token && !checkLogin()) {			toLogin();			return Promise.reject({				msg: i18n.t(`not_logged_in`)			});		}	}

复制代码

总结

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

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

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

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

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

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

发布于: 刚刚阅读数: 4

CRMEB

关注

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步，能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

发布

暂无评论

创作场景

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

为什么要国际化？

正文

遇到的问题

总结

CRMEB

评论