vue實現網頁語言國際化切換

Posted on by

一、基本步驟

1：安裝 yarn add vue-i18n

 在此路徑新建一個.js文件：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:{
		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, value) => i18n.t(key, value)
})

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

 註意：

this.$i18n.locale能獲取與設置當前語言在js文件中使用國際化

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

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

到此這篇關於vue實現網頁語言國際化切換的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：