Vue2.0 使用i18n插件实现中英文切换

1、安装i18n插件

cnpm install vue-i18n (我使用的是国内的cnpm)

2、在main.js中引入并且全局使用

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
locale: 'zh',// 进入页面默认语言（如果你需要记录用户的设置，下次进入还是显示上次设置的语言的话，后面这块会有点修改。请往下看）
messages: {
	'zh': require('./common/language/zh'),
	'en': require('./common/language/en')
 }

3、创建语言文件夹和文件

先在src下创建common目录和language子级目录，然后新建zh.js和en.js两个js文件。

en.js文件内容：

module.exports = {
	language: {
		name: '中文'
	},
	navbar: {
		home: 'home',
		introduction: 'introduction',
		contact: 'contact'
	}
}

zh.js文件内容：

module.exports = {
	language: {
		name: 'English'
	},
	navbar: {
		home: '首页',
		introduction: '简介',
		contact: '联系我们'
	}
}

上面的name语言之所以是反的，是因为切换按钮的文字显示需要是反，即英文页面显示中文切换按钮，中文页面显示英文切换按钮。

4、在项目中使用i18n

<p>{{ $t('language.navbar.contact') }}</p>

这样就可以在页面中显示中文的文本，main.js中默认为’zh’可手动改为英文文本。

5、变更语言

新建一个按钮，在methids中添加一个点击事件

changeLocale() {
	let locale = this.$i18n.locale
	locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
	locale === 'zh' ? this.msg = '英文' : this.msg = '中文' //按钮内的文本替换
	localStorage.setItem('i18n',that.$i18n.locale) //存储进本地缓存，当用户刷新页面或者后面进入浏览器默认显示上次选择的语言
}
//（这边就是有记录用户的设置，需要把main.js内的locale:的值修改为localStorage.getItem('i18n') || 'zh' 如下，这边用或者 '||'是因为，当用户首次进入浏览器从未设置过语言的时候，默认是用中文的）
const i18n = new VueI18n({
	locale: localStorage.getItem('i18n') || 'zh', // 语言标识
	messages: {
		'zh': require('./common/lang/zh'),
		'en': require('./common/lang/en')
	}
})

这样就实现了简单的中英文的切换了。