一、基本步驟

1：安裝yarn add -i18n

在此路徑新建一個.檔案：src/lang/index.js後：

2:匯入

import VueI18n from 'vue-i18n'

3:註冊

import Vue from 'vue'

Vue.use(VueI18n)

4:例項化

const  i18n=new VueI18n({
	locale:'當前語言的標識'，   // en:英文  zh:中文
	messages:{
		//  語言包
		en:{
		home:'home'
		},zh:{VoKhKHH
		home:'首頁'
		}
	}
})

5:暴露出去

export default i18n

6:掛載到main.js

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

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

二、在main.js中匯入element-ui國際化語言配置

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

三、新建一個.vue檔案通過按鈕實現語言切換

注意：

this.$i18n.locale能獲取與設定當前語言在js檔案中使用國際化

四、實現選單的國際化處理，需要在路由中引入

import i18n from '@/lang'後將i18n.t===this.$t

到此這篇關於vue實現語言國際化切換的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。