一笑·科奉

利用vue-i18n实现多语言

作者: 一笑, 写于: 2018-07-25 09:35:10

一、安装vue-i18n

npm install vue-i18n

注意:Linux&Mac系统,需要增加sudo,windows系统不需要增加sudo

sudo npm install vue-i18n

如果出现以下报错,则执行升级命令进行升级,再执行上述命令进行安装

image.png

sudo npm install -g npm

正确安装后,提示信息如下

image.png

如果再报错就执行,就执行下以下命令重新安装环境

sudo npm install

二、创建项目文件

1、在vue/src/main.js同级目录创建lang目录,

image.png

下载目录文件:lang.zip

2、在vue/src/main.js文件中引用或实例化

import i18n from './lang'

image.png

3、在vue/src/main.js文件中调用实例

image.png

三、使用多语言字符串

在App.vue模板中增加

<div>{{ $t('message.language') }}</div>
<button v-on:click="changeLanguage('en')">English</button>
<button v-on:click="changeLanguage('chs')">简体中文</button>
<button v-on:click="changeLanguage('cht')">繁體中文</button>

并在App.vue的methods中增加changeLanguage方法

changeLanguage: function(lang){
    this.$i18n.locale = lang;
},

image.png

这样就会自动调用默认的简体中文了。

image.png

如果需要更改為英文,就调用changeLanguage('en')

image.png

但是,这样不够人性化。我们需要根据用户习惯,显示他常用语言。

四、判断浏览器语言

//获取浏览器语言
var lang = navigator.language||navigator.userLanguage;
switch(lang){
	case 'zh-CN':
		this.changeLanguage('chs');
		break;
	case 'zh':
		this.changeLanguage('chs');
		break;
	case 'zh-TW':
		this.changeLanguage('cht');
		break;
	default:
		this.changeLanguage('en');
		break;
}

五、使用cookie记录当前语言(防止刷新后丢失)

var cookieLang = $util.cookie('lang')

和第四步组合后变成:

langInitialization: function(){
			//获取浏览器语言
			var cookieLang = $util.cookie('tms_lang');
			var lang = $util.empty(cookieLang)?(navigator.language||navigator.userLanguage):cookieLang;
			switch(lang){
				case 'zh-CN':
				case 'chs':
				case 'zh':
					this.changeLanguage('chs');
					break;
				case 'zh-TW':
				case 'cht':
					this.changeLanguage('cht');
					break;
				case 'en':
					this.changeLanguage('en');
					break;
				default:
					this.changeLanguage('en');
					break;
			}
		},


六、结语

因为每次更改语言,页面最好是重载下页面,否则路由view可能无法刷新

分类: Vue.js, 浏览: 102, 评论: 0
原创文章转载请注明:转自《一笑·科奉》 原文地址:https://www.kefong.com/post/93.html