1.下包(我是vue2)
yarn add vue- i18n@8.2.1 -- save
2.建多语言实例化文件
import Vue from 'vue'
import VueI18n from 'vue- i18n'
import Cookie from 'js- cookie'
import elementEN from 'element- ui/ lib/ locale/ lang/ en'
import elementZH from 'element- ui/ lib/ locale/ lang/ zh- CN '
import elementJA from 'element- ui/ lib/ locale/ lang/ ja'
import customZH from '@/ lang/ zh'
import customEN from '@/ lang/ en'
Vue . use ( VueI18n )
export default new VueI18n ( {
locale: Cookie . get ( 'language') || ' zh',
messages: {
en: {
. . . elementEN,
. . . customEN
} ,
zh: {
. . . elementZH,
. . . customZH
} ,
ja: {
. . . elementJA
}
}
} )
3.在main.js中挂载插件
import i18n from '@/ lang/ index'
new Vue ( {
i18n
} )
Vue . use ( ElementUI , {
i18n: ( key, value) = > i18n. t ( key, value)
} )
4.封装多语言组件
< ! -- 封装多语言组件-- >
< template>
< el- dropdown trigger= "click" @command = "changeLanguage" >
< ! -- 这里必须加一个div -- >
< div>
< svg- icon style= "color:#fff;font-size:20px" icon- class = "language" / >
< / div>
< el- dropdown- menu slot= "dropdown" >
< el- dropdown- item command= "zh" : disabled= "'zh'=== $i18n.locale " > 中文< / el- dropdown- item>
< el- dropdown- item command= "en" : disabled= "'en'=== $i18n.locale " > en< / el- dropdown- item>
< / el- dropdown- menu>
< / el- dropdown>
< / template>
< script>
import Cookie from 'js- cookie'
export default {
methods: {
changeLanguage ( lang) {
Cookie . set ( 'language', lang)
this . $i18n. locale = lang
this . $message. success ( '切换多语言成功')
}
}
}
< / script>