vue实现网页语言国际化切换

一、基本步骤

在此路径新建一个.js文件：src/lang/index.js后：

import VueI18n from 'vue-i18n'

import Vue from 'vue'

Vue.use(VueI18n)

const  i18n=new VueI18n({
	locale:'当前语言的标识'，   // en:英文  zh:中文
	messages:{
		//  语言包
		en:{
		home:'home'
		},
		zh:{
		home:'首页'
		}
	}
})

export default i18n

import i18n from '@/lang'
new Vue({
i18n
})

使用：<div>{{$t('home')}}</home>

import i18n from './lang/index'
import ElementUI from 'element-ui'
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

注意：

this.$i18n.locale能获取与设置当前语言在js文件中使用国际化

import i18n from '@/lang'后将i18n.t===this.$t