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做全局中英文切換的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答