vue 利用i18实现语言切换

vue语言切换

1.安装i18n模块

 - npm i vue-i18n (yarn add vue-i18n)

2.在mian.js中全局激活 创建VueI18n实例对象

 - 	import VueI18n from 'vue-i18n'
	Vue.use(VueI18n) 
	
	const i18n = new VueI18n({
	locale: localStorage.getItem('language')||'zh', //使用localStorage缓存到本地，当下次使用时可默认当前使用语言
  messages: {
    'zh': require('./common/lang/zh'),
    'en': require('./common/lang/en'),
    'han': require('./common/lang/han'),
    'gou': require('./common/lang/gou'),
  }
})

3.在src目录下创建common目录 在该目录下创建lang目录 存放需要更改的语言
4.在需要调用的地方 利用插值即可

<h1>{{ $t('navbar.title') }}</h1>