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: '',
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中的使用：
{{ $t('language.name') }}
{{ $t('navbar.contact') }}
總結
以上所述是小編給大家介紹的vue 使用vue-i18n做全局中英文切換的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對網站的支援！