vue中使用 vue-i18n 简单的国际化操作

下载依赖 npm install vue-i18n --save-dev

main.js配置

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    
    
  locale: 'zh',
  messages: {
    
    
    zh: require('./VueI18n/language-zh'),
    en: require('./VueI18n/language-en')
  }
})
new Vue({
    
    
    router,
    store,
    i18n,
    render: h => h(App)
  }).$mount('#app')

创建文件夹，main.js引入

组件使用，点击切换语言 这样就完成了一个简单的国际化。language-en.js language-zh.js这两个文件是要翻译的内容，通过$t(’ ') 完成调用。

<p>{
   
   { $t('lang.home') }}</p>
    <p>{
   
   { $t('lang.name') }}</p>
    <p @click="changeLaguages">切换语言</p>

changeLaguages() {
    
    
      console.log(this.$i18n.locale)
      let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
      this.$i18n.locale = lang
    },