一、下载依赖
npm install vue-i18n
二、创建翻译文件夹
我是在 src/components/lang/ 下面创建了en-US.js 和 zh-CN.js
三、在main.js中配置
有缓存从缓存拿,默认中文
import VueI18n from 'vue-i18n'
import zhCN from '@/components/lang/zh-CN.js'
import enUS from '@/components/lang/en-US.js'
Vue.use(VueI18n)
const lang = localStorage.hasOwnProperty('pro__DEFAULT_LANGUAGE') ? JSON.parse(localStorage.pro__DEFAULT_LANGUAGE).value : ''
console.log(lang, 'main-----')
// 注册i18n实例并引入语言文件,文件格式等下解析
const i18n = new VueI18n({
locale: lang || 'zh-CN',
messages: {
'zh-CN': zhCN,
'en-US': enUS
}
})
//将i18n注入到vue实例中
new Vue({
el: '#app',
router,
store,
i18n,
components: { App },
template: '<App/>'
})
四、配置切换中英文按钮
lang: localStorage.hasOwnProperty('pro__DEFAULT_LANGUAGE') ? JSON.parse(localStorage.pro__DEFAULT_LANGUAGE).value : 'zh-CN',
<a-dropdown>
<span>
<a>
<a-icon type="global" />
</a>
<span v-if="language === 'zh-CN'">
中文
</span>
<span v-if="language === 'en-US'">
English
</span>
</span>
<a-icon type="down" />
<a-menu slot="overlay">
<a-menu-item>
<span @click="chooseLanguage('zh-CN')">{{$t('lang.zhCN')}}</span>
</a-menu-item>
<a-menu-item>
<span @click="chooseLanguage('en-US')">{{$t('lang.enUS')}}</span>
</a-menu-item>
</a-menu>
</a-dropdown>
chooseLanguage(val) {
this.$store.dispatch('ToggleLanguage', val)
this.$i18n.locale = val
this.lang = val
},
vuex
actions:{
ToggleLanguage({ commit }, language) {
commit('SET_LANGUAGE', language)
},
}
mutations:{
SET_LANGUAGE(state, language) {
Vue.ls.set(DEFAULT_LANGUAGE, language)
state.language = language
},
state: {
language: localStorage.hasOwnProperty('pro__DEFAULT_LANGUAGE') ? JSON.parse(localStorage.pro__DEFAULT_LANGUAGE).value : 'zh-CN',
}
}
import { DEFAULT_LANGUAGE,
} from "@/store/mutation-types"
//mutation-types
export const DEFAULT_LANGUAGE = 'DEFAULT_LANGUAGE'
最后 $t(‘xxxx.ddd’) 就可以使用了