1.安裝
npm install?vue-i18n
2.配置
? ? main.js文件的
? ? 1.引入
? ? importVue from 'vue'
????import VueI18n from 'vue-i18n'
? ? Vue.use(VueI18n)
? ? 2.注冊實例夫嗓，引入文件
? ? const i18n = new VueI18n({
? ? ????local:'zh',
? ? ????messages:{
? ? ? ? ????'zh':'zhIndexFiledsPath.js',?
????????????'en':'enIndexFiledsPath.js'
????????}? ??
? ? })
? ? new Vue({
? ? ? el:'#app',
? ? ? i18n,
? ? ? ?componants:{App},
? ? ? ? template:<App/>??
????})
3.使用
html
<template>
? ? <div>{{$t{'messages.name'}}}</div>
</template>
js
let a = this.$t{'messages.name'}
4.切換
<el-button @click="lang('en')">en</el-button>
<el-button @click="lang('zh')">zh</el-button>
lang(type){
? ? this.$i18n.local = type
}
5.刷新依舊保存原來狀態(tài)
const i18n = new VueI18n({
? ? ????local:localstorage.getItem('lang')||'zh',
? ? ????messages:{
? ? ? ? ????'zh':'zhIndexFiledsPath.js',?
????????????'en':'enIndexFiledsPath.js'
????????}? ??
? ? })
lang(type){
? ? this.$i18n.local = type
? ? loaclstorage.setItem('lang',type)
}
