vue.js国际化处理

关于国际化
vue-i18n安装配置
vue-i18n的使用
路由里的菜单如何实现国际化
切换语言

关于国际化

目前我要做的是两套，中文和英文。要求是UI语言显示会变化，重点是，内容的语言也要变会。

想到扩展，以后可能会提支持其他的语言，于是就打算这么干：

前端支持语言切换，UI上的语言本地化翻译即可
后台提供语言表，用于支持内容的多语言
语言表的字段有：
- id:ID
- content_id:内容ID
- field:字段
- lan:语言
- value:语言值

当用户切换到不同语言的时候，所有的请求的头部都携带语言区域，比如说zh-CN,en-US。

后台根据这个来数据入库，查询的时候，以此作为条件查询出对应语言的内容返回。

vue-i18n安装配置

注意版本，如果版本不对的话，会报错的嗷。只要新撞了vue-i18n运行报错了，你第一件事情就是怀疑版本。

如果你是vue2的版本你安装npm install vue-i18n@2 --save吧，如果是vue3的话npm install vue-i18n@3 --save，不行再找其他的版本。

安装完以后，package.js中会多出版本来：

图片描述

配置


Vue.use(VueI18n); // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
        'zh-CN': require('./utils/lang/zh'),   // 中文语言包
        'en-US': require('./utils/lang/en')    // 英文语言包
    }
});

....

new Vue({
    router,
    i18n, //看这里
    render: h => h(App),
}).$mount('#app');

vue-i18n的使用

我们前面引入了lang/zh.js和lang/en.js

这两个文件如何写呢？

zh.js

export const m = {
    webSiteTitle: '阳光沙滩用户管理中心',
    userInfo: '用户信息',
    logout: '退出登录',
    index: '首页',
};

en.js

export const m = {
    webSiteTitle: 'ICAdminCenter',
    userInfo: 'User Info',
    logout: 'Logout',
    index: 'index',
};

组件上使用

<div class="header-left-box float-left">
	<div class="header-logo">{{$t('m.webSiteTitle')}}</div>
</div>

菜单的渲染

通常我们会在路由里配置菜单的名字，以摸鱼君管理中心的公用框架为例：web-admin-vue

图片描述

这里的菜单name就是硬编码写的。如果我们切换到其他语言，侧栏的文字则没法变化。

怎么办呢？我们可以从渲染菜单的代码入手。

首先，把name改成m.xxx，这个m就是我们zh.js，en.js里的常量名。

图片描述

<el-menu-item :index="item.path">
	<i :class="item.icon"></i>
	<span slot="title">{{$t(item.name)}}</span>
</el-menu-item>

这样子不就可以了吗？

切换语言

语言切换，我们修改

<el-dropdown @command="handlerLan">
	  <span class="lan-selector">
		<i class="el-icon-set-up"></i>{{currentLan}}
	  </span>
	<el-dropdown-menu slot="dropdown">
		<el-dropdown-item :command="item" v-for="(item,index) in lanList" :key="index">
			{{item.name}}
		</el-dropdown-item>
	</el-dropdown-menu>
</el-dropdown>

数据列表

lanList: [{
	name: '简体中文',
	value: 'zh-CN'
}, {
	name: 'English',
	value: 'en-US'
}]

处理方法：

handlerLan(item) {
	//设置语言
	this.$i18n.locale = item.value;
	//保存到本地
	window.localStorage.setItem('lan-value', item.value);
	window.localStorage.setItem('lan-name', item.name);
	this.currentLan = item.name;
}

到这里，就可以切换语言了。

图片描述