1、vue-i18n安裝
npm install vue-i18n --save-dev
2、在main.js文件中引入
import VueI18n from 'vue-i18n';  Vue.use(VueI18n);  const i18n = new VueI18n({    locale: localStorage.getItem('language')||'zh', //使用localStorage緩存到本地,當下次使用時可默認當前使用語言    messages: { '      zh': require('./common/lang/zh'),      'en': require('./common/lang/en')    }  })  new Vue({    el: '#app',    router,    i18n,    template: '<App/>',    components: { App }  })3、新建中英文語言文件
zh.js:
module.exports = {    language: {      name: 'English'    },    navbar: {      home: '首頁',    }  }en.js:
module.exports = {    language: {      name: '中文'    },    navbar: {      home: 'Home',    }  }4、創建一個切換語言方法(寫在App.vue可以全局控制);
 changeLang() {    let locale = localStorage.getItem('language')||'zh';    let temp=locale === 'zh' ? 'en' : 'zh';    this.$i18n.locale=temp;//改變當前語言     localStorage.language=temp;  }5、在template中的使用: 
 <p>{{ $t('language.name') }}</p>  <p>{{ $t('navbar.contact') }}</p>總結
以上所述是小編給大家介紹的vue 使用vue-i18n做全局中英文切換的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答